diff --git a/packages/@react-spectrum/ai/intl/ar-AE.json b/packages/@react-spectrum/ai/intl/ar-AE.json
new file mode 100644
index 00000000000..adc6cbede25
--- /dev/null
+++ b/packages/@react-spectrum/ai/intl/ar-AE.json
@@ -0,0 +1,6 @@
+{
+  "chat.newMessage": "New message",
+  "messagefeedback.thumbDown": "Bad response",
+  "messagefeedback.thumbUp": "Good response",
+  "responsestatus.loading": "Loading"
+}
diff --git a/packages/@react-spectrum/ai/intl/en-US.json b/packages/@react-spectrum/ai/intl/en-US.json
index 8ac525f626b..adc6cbede25 100644
--- a/packages/@react-spectrum/ai/intl/en-US.json
+++ b/packages/@react-spectrum/ai/intl/en-US.json
@@ -1,4 +1,5 @@
 {
+  "chat.newMessage": "New message",
   "messagefeedback.thumbDown": "Bad response",
   "messagefeedback.thumbUp": "Good response",
   "responsestatus.loading": "Loading"
diff --git a/packages/@react-spectrum/ai/src/Thread.tsx b/packages/@react-spectrum/ai/src/Chat.tsx
similarity index 61%
rename from packages/@react-spectrum/ai/src/Thread.tsx
rename to packages/@react-spectrum/ai/src/Chat.tsx
index f2beefb9c81..b50d071300e 100644
--- a/packages/@react-spectrum/ai/src/Thread.tsx
+++ b/packages/@react-spectrum/ai/src/Chat.tsx
@@ -16,6 +16,7 @@ import {
   createContext,
   forwardRef,
   ReactNode,
+  RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -31,21 +32,50 @@ import {
   GridListItemProps,
   GridListProps
 } from 'react-aria-components/GridList';
-import {nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';
-import {TextFieldContext} from 'react-aria-components/TextField';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
+import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
+import {useFocusWithin} from 'react-aria/useFocusWithin';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
+import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
+
+const scrollButtonWrapper = style({
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
+  },
+  translateY: {
+    isEntering: 4,
+    isExiting: 4
+  },
+  transition: '[opacity, translate]',
+  transitionDuration: 200,
+  transitionTimingFunction: {
+    isExiting: 'in'
+  },
+  pointerEvents: {
+    isExiting: 'none'
+  }
+});
+
+export interface PromptFocusContextValue {
+  onFocusChange: (isFocused: boolean) => void;
+}
+
+export const PromptFocusContext = createContext<PromptFocusContextValue>({
+  onFocusChange: () => {}
+});
 
-interface InternalThreadContextValue {
+interface InternalChatContextValue {
   announceItem: (text: string) => void;
-  setGridListFocused: (isFocused: boolean) => void;
   setIsNearBottom: (isNear: boolean) => void;
   setScrollElement: (element: HTMLElement | null) => void;
 }
 
-const InternalThreadContext = createContext<InternalThreadContextValue>({
+const InternalChatContext = createContext<InternalChatContextValue>({
   announceItem: text => announce(text, 'polite'),
-  setGridListFocused: () => {},
   setIsNearBottom: () => {},
   setScrollElement: () => {}
 });
@@ -61,64 +91,83 @@ const ThreadScrollButtonContext = createContext<ThreadScrollButtonContextValue>(
 });
 
 // TODO: make this more RAC like (aka default class name and other RAC prop)
-interface ThreadProps {
+interface ChatProps {
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
 }
 
-// TODO: tabbing is a bit broken as well since we hit the child elements of the gridlist rows in opposite order... This seems to be due to the
-// tabIndex = 0 of the ToggleButtons in the ToggleButtonGroup
-export const Thread = /*#__PURE__*/ (forwardRef as forwardRefType)(function Thread(
-  props: ThreadProps,
+export const Chat = /*#__PURE__*/ (forwardRef as forwardRefType)(function Chat(
+  props: ChatProps,
   ref: DOMRef<HTMLDivElement>
 ) {
   let {children, className, style} = props;
   let domRef = useDOMRef(ref);
-  let isGridListFocusedRef = useRef(false);
   let isFieldFocusedRef = useRef(false);
+  let isChatFocusWithinRef = useRef(false);
   let hasNewMessagesRef = useRef(false);
   let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
 
   let scrollRef = useRef<HTMLElement | null>(null);
   let scrollToBottom = useCallback(() => {
-    scrollRef.current?.scrollTo({top: 0, behavior: 'smooth'});
+    let el = scrollRef.current;
+    if (!el) {
+      return;
+    }
+    // TODO: will need some kind of api to programatically set the focused item to
+    // the newest item in the gridlist in the virtualizer case. this works for
+    // non-virtualized for now though
+    el.addEventListener(
+      'scrollend',
+      () => {
+        let firstRow = el.querySelector<HTMLElement>('[role="row"]');
+        (firstRow ?? el).focus();
+      },
+      {once: true}
+    );
+    el.scrollTo({top: 0, behavior: 'smooth'});
   }, []);
   let [isNearBottom, setIsNearBottom] = useState(true);
 
   // only announce new items if user is in the prompt field, otherwise if they
-  // are in the thread only announce there are new responses. If not in thread, don't announce
-  let announceItem = useCallback((text: string) => {
-    if (isGridListFocusedRef.current) {
-      // TODO: ideally announce number of new messages, but only count system messages? maybe threaditem needs
-      // to have a "type" prop
-      if (!hasNewMessagesRef.current) {
-        hasNewMessagesRef.current = true;
-        announce('New message', 'polite');
-        // TODO: arbirary amount of time to wait before announcing new message, maybe we don't clear until
-        // we detect they scroll down? Or maybe when we do the message count we do it after a certain number of messages?
-        // or maybe this is fine
-        timeout.current = setTimeout(() => {
-          hasNewMessagesRef.current = false;
-          timeout.current = null;
-        }, 5000);
+  // are outside the field, only announce there are new responses. If not in chat at all, don't announce
+  let announceItem = useCallback(
+    (text: string) => {
+      if (isFieldFocusedRef.current) {
+        announce(text, 'polite');
+        return;
       }
-      return;
-    }
 
-    if (isFieldFocusedRef.current) {
-      announce(text, 'polite');
-    }
-  }, []);
-
-  let setGridListFocused = useCallback((isFocused: boolean) => {
-    isGridListFocusedRef.current = isFocused;
-  }, []);
+      if (isChatFocusWithinRef.current) {
+        // TODO: ideally announce number of new messages, but only count system messages? maybe threaditem needs
+        // to have a "type" prop
+        if (!hasNewMessagesRef.current) {
+          hasNewMessagesRef.current = true;
+          announce(stringFormatter.format('chat.newMessage'), 'polite');
+          // TODO: arbirary amount of time to wait before announcing new message, maybe we don't clear until
+          // we detect they scroll down? Or maybe when we do the message count we do it after a certain number of messages?
+          // or maybe this is fine
+          timeout.current = setTimeout(() => {
+            hasNewMessagesRef.current = false;
+            timeout.current = null;
+          }, 5000);
+        }
+      }
+    },
+    [stringFormatter]
+  );
 
   let setScrollElement = useCallback((el: HTMLElement | null) => {
     scrollRef.current = el;
   }, []);
 
+  let {focusWithinProps} = useFocusWithin({
+    onFocusWithinChange: isFocused => {
+      isChatFocusWithinRef.current = isFocused;
+    }
+  });
+
   useEffect(() => {
     return () => {
       if (timeout.current !== null) {
@@ -130,26 +179,18 @@ export const Thread = /*#__PURE__*/ (forwardRef as forwardRefType)(function Thre
   return (
     <Provider
       values={[
-        [
-          InternalThreadContext,
-          {announceItem, setGridListFocused, setIsNearBottom, setScrollElement}
-        ],
+        [InternalChatContext, {announceItem, setIsNearBottom, setScrollElement}],
         [ThreadScrollButtonContext, {isNearBottom, scrollToBottom}],
         [
-          TextFieldContext,
+          PromptFocusContext,
           {
-            slots: {
-              [DEFAULT_SLOT]: {},
-              prompt: {
-                onFocusChange: (focused: boolean) => {
-                  isFieldFocusedRef.current = focused;
-                }
-              }
+            onFocusChange: (focused: boolean) => {
+              isFieldFocusedRef.current = focused;
             }
           }
         ]
       ]}>
-      <div ref={domRef} className={className} style={style}>
+      <div ref={domRef} className={className} style={style} {...focusWithinProps}>
         {children}
       </div>
     </Provider>
@@ -157,22 +198,22 @@ export const Thread = /*#__PURE__*/ (forwardRef as forwardRefType)(function Thre
 });
 
 // TODO: update the items/className/children/etc type to reflect a thread specific classname once we finalize API
-interface ThreadListProps<T extends object> extends Pick<
+interface ThreadProps<T extends object> extends Pick<
   GridListProps<T>,
-  'items' | 'children' | 'focusOnEntry' | 'aria-label' | 'aria-labelledby' | 'className'
+  'items' | 'children' | 'UNSTABLE_focusOnEntry' | 'aria-label' | 'aria-labelledby' | 'className'
 > {}
 
-export function ThreadList<T extends object>(props: ThreadListProps<T>) {
+export function Thread<T extends object>(props: ThreadProps<T>) {
   let {
     items,
     children,
     className,
-    focusOnEntry,
+    UNSTABLE_focusOnEntry,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
   } = props;
 
-  let {setGridListFocused, setIsNearBottom, setScrollElement} = useContext(InternalThreadContext);
+  let {setIsNearBottom, setScrollElement} = useContext(InternalChatContext);
   let isNearBottomRef = useRef(true);
   let gridListRef = useRef<HTMLDivElement | null>(null);
 
@@ -184,28 +225,6 @@ export function ThreadList<T extends object>(props: ThreadListProps<T>) {
     [setScrollElement]
   );
 
-  // TODO: gridlist doesn't have onFocus/onBlur
-  useEffect(() => {
-    let el = gridListRef.current;
-    if (!el) {
-      return;
-    }
-
-    let onFocusIn = () => setGridListFocused(true);
-    let onFocusOut = (e: FocusEvent) => {
-      if (!nodeContains(el, e.relatedTarget as Node)) {
-        setGridListFocused(false);
-      }
-    };
-
-    el.addEventListener('focusin', onFocusIn);
-    el.addEventListener('focusout', onFocusOut);
-    return () => {
-      el.removeEventListener('focusin', onFocusIn);
-      el.removeEventListener('focusout', onFocusOut);
-    };
-  }, [setGridListFocused]);
-
   let handleScroll = useCallback(() => {
     let el = gridListRef.current;
     if (!el) {
@@ -237,7 +256,7 @@ export function ThreadList<T extends object>(props: ThreadListProps<T>) {
       disallowTypeAhead
       onScroll={handleScroll}
       keyboardNavigationBehavior="tab"
-      focusOnEntry={focusOnEntry}
+      UNSTABLE_focusOnEntry={UNSTABLE_focusOnEntry}
       items={items}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
@@ -257,19 +276,39 @@ interface ThreadScrollButtonProps {
 // and ditch the wrapper?
 export function ThreadScrollButton({children}: ThreadScrollButtonProps) {
   let {isNearBottom, scrollToBottom} = useContext(ThreadScrollButtonContext);
+  let ref = useRef<HTMLDivElement>(null);
+  let isVisible = !isNearBottom;
+  let isExiting = useExitAnimation(ref, isVisible);
 
-  if (isNearBottom) {
+  if (!isVisible && !isExiting) {
     return null;
   }
 
   return (
     <ButtonContext.Provider
       value={{slots: {[DEFAULT_SLOT]: {}, scroll: {onPress: scrollToBottom}}}}>
-      {children}
+      <ThreadScrollButtonInner domRef={ref} isExiting={isExiting}>
+        {children}
+      </ThreadScrollButtonInner>
     </ButtonContext.Provider>
   );
 }
 
+interface ThreadScrollButtonInnerProps {
+  domRef: RefObject<HTMLDivElement | null>;
+  isExiting: boolean;
+  children?: ReactNode;
+}
+
+function ThreadScrollButtonInner({domRef, isExiting, children}: ThreadScrollButtonInnerProps) {
+  let isEntering = useEnterAnimation(domRef);
+  return (
+    <div ref={domRef} className={scrollButtonWrapper({isEntering, isExiting})}>
+      {children}
+    </div>
+  );
+}
+
 // TODO: update the className type to reflect a thread specific classname once we finalize API
 interface ThreadItemProps extends Pick<GridListItemProps, 'className' | 'children' | 'textValue'> {
   /** Whether or not the item's content is currently being streamed in. */
@@ -280,7 +319,7 @@ interface ThreadItemProps extends Pick<GridListItemProps, 'className' | 'childre
 
 export function ThreadItem(props: ThreadItemProps) {
   let {className, children, textValue = ' ', isStreaming, shouldAnnounceOnMount} = props;
-  let {announceItem} = useContext(InternalThreadContext);
+  let {announceItem} = useContext(InternalChatContext);
 
   // TODO: using aria-live on the gridlist item was pretty chatty and the streaming causes the text announcement
   // to constantly reset. If we used a live region and updated its contents when streaming finished that worked decently
diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index 94a44d14cbd..d4ca06edbd7 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -47,8 +47,10 @@ import {Menu, MenuItem, MenuItemProps, MenuTrigger} from '@react-spectrum/s2/Men
 import Plus from '@react-spectrum/s2/icons/Add';
 import {Popover, PopoverProps} from '@react-spectrum/s2/Popover';
 import {positionToDOMRange, Token, TokenField, TokenProps} from './TokenField';
+import {PromptFocusContext} from './Chat';
 import Send from '@react-spectrum/s2/icons/ArrowUpSend';
 import Stop from '@react-spectrum/s2/icons/StopProcessing';
+import {useFocusWithin} from 'react-aria/useFocusWithin';
 
 interface Attachment {
   id: string;
@@ -172,6 +174,9 @@ export function PromptField(props: PromptFieldProps) {
     }
   });
 
+  let {onFocusChange} = useContext(PromptFocusContext);
+  let {focusWithinProps} = useFocusWithin({onFocusWithinChange: onFocusChange});
+
   let onSubmit = () => {
     if (prompt.segments.length === 0) {
       return;
@@ -198,7 +203,7 @@ export function PromptField(props: PromptFieldProps) {
         onAddAttachments,
         onRemoveAttachments
       }}>
-      <div>
+      <div {...focusWithinProps}>
         <Group
           {...dropProps}
           role="group"
diff --git a/packages/@react-spectrum/ai/src/ResponseStatus.tsx b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
index 13bcde2b384..786f9120609 100644
--- a/packages/@react-spectrum/ai/src/ResponseStatus.tsx
+++ b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
@@ -259,7 +259,7 @@ export const ResponseStatusTitle = forwardRef(function ResponseStatusTitle(
   let {isExpanded} = useContext(DisclosureStateContext)!;
   let {size = 'M', density, isLoading} = useContext(ResponseStatusContext)!;
   let isRTL = direction === 'rtl';
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
 
   return (
     <Heading {...domProps} level={level} ref={domRef} className={mergeStyles(headingStyle, styles)}>
diff --git a/packages/@react-spectrum/ai/stories/Thread.stories.tsx b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
similarity index 96%
rename from packages/@react-spectrum/ai/stories/Thread.stories.tsx
rename to packages/@react-spectrum/ai/stories/Chat.stories.tsx
index 38fbb6669a5..e04ded54106 100644
--- a/packages/@react-spectrum/ai/stories/Thread.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/Chat.stories.tsx
@@ -13,6 +13,7 @@
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
 import {AssetCard, CardPreview} from '@react-spectrum/s2/Card';
+import {Chat, Thread, ThreadItem, ThreadScrollButton} from '../src/Chat';
 import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
 import {Content} from '@react-spectrum/s2/Content';
 import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
@@ -28,18 +29,17 @@ import {PromptField, PromptFieldSubmitButton, PromptTokenField} from '../src/Pro
 import {ReactNode, useRef, useState} from 'react';
 import {ResponseStatus, ResponseStatusPanel, ResponseStatusTitle} from '../src/ResponseStatus';
 import {Text} from '@react-spectrum/s2/Text';
-import {Thread, ThreadItem, ThreadList, ThreadScrollButton} from '../src/Thread';
 import type {TokenSegmentList} from '../src/TokenSegmentList';
 import {UserMessage} from '../src/UserMessage';
 import {Virtualizer} from 'react-aria-components/Virtualizer';
 
-const meta: Meta<typeof Thread> = {
-  component: Thread,
+const meta: Meta<typeof Chat> = {
+  component: Chat,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs'],
-  title: 'AI/Thread',
+  title: 'AI/Chat',
   decorators: [
     Story => (
       <div style={{width: '800px', height: '700px'}}>
@@ -137,7 +137,7 @@ function CardMessage({
   );
 }
 
-export function StreamingThread() {
+export function StreamingChat() {
   let [messages, setMessages] = useState<StreamingMessage[]>(
     initialResponses as StreamingMessage[]
   );
@@ -352,7 +352,7 @@ export function StreamingThread() {
         gap: 32,
         height: '100%'
       })}>
-      <Thread
+      <Chat
         className={style({
           display: 'flex',
           flexDirection: 'column',
@@ -383,17 +383,16 @@ export function StreamingThread() {
               </ActionButton>
             </ThreadScrollButton>
           </div>
-          <ThreadList
+          <Thread
             items={[...messages].reverse()}
-            focusOnEntry="first"
+            UNSTABLE_focusOnEntry="first"
             aria-label="Chat thread"
             className={style({
               flexGrow: 1,
               overflow: 'auto',
               padding: 8,
               scrollPadding: 8,
-              rowGap: 16,
-              alignItems: 'start'
+              rowGap: 16
             })}>
             {(msg: StreamingMessage) => {
               if (msg.type === 'user') {
@@ -401,7 +400,12 @@ export function StreamingThread() {
                 return (
                   <ThreadItem
                     textValue={msg.content}
-                    className={style({...focusRing(), borderRadius: 'default', alignSelf: 'end'})}>
+                    className={style({
+                      ...focusRing(),
+                      borderRadius: 'default',
+                      display: 'flex',
+                      justifyContent: 'end'
+                    })}>
                     <UserMessage>{msg.content}</UserMessage>
                   </ThreadItem>
                 );
@@ -466,7 +470,7 @@ export function StreamingThread() {
                 </SystemMessage>
               );
             }}
-          </ThreadList>
+          </Thread>
         </div>
         <PromptField
           onSubmit={handleSend}
@@ -481,13 +485,13 @@ export function StreamingThread() {
             <PromptFieldSubmitButton />
           </div>
         </PromptField>
-      </Thread>
+      </Chat>
     </div>
   );
 }
 
 // Ignore this story, just here for local testing
-export function VirtualizedThread() {
+export function VirtualizedChat() {
   let [messages, setMessages] = useState<Message[]>(initialResponses);
   let nextId = useRef(initialResponses.length);
   let lastMessage = messages.at(-1);
@@ -520,7 +524,7 @@ export function VirtualizedThread() {
         <GridList
           aria-label="Chat thread"
           keyboardNavigationBehavior="tab"
-          focusOnEntry="last"
+          UNSTABLE_focusOnEntry="last"
           items={messages}
           className={style({
             height: 400,
@@ -533,7 +537,12 @@ export function VirtualizedThread() {
               return (
                 <ThreadItem
                   textValue={msg.content}
-                  className={style({...focusRing(), borderRadius: 'lg', alignSelf: 'end'})}>
+                  className={style({
+                    ...focusRing(),
+                    borderRadius: 'lg',
+                    display: 'flex',
+                    justifyContent: 'end'
+                  })}>
                   <UserMessage>{msg.content}</UserMessage>
                 </ThreadItem>
               );
diff --git a/packages/@react-spectrum/ai/test/Thread.browser.test.tsx b/packages/@react-spectrum/ai/test/Chat.browser.test.tsx
similarity index 85%
rename from packages/@react-spectrum/ai/test/Thread.browser.test.tsx
rename to packages/@react-spectrum/ai/test/Chat.browser.test.tsx
index baf016a7ac3..23154add82c 100644
--- a/packages/@react-spectrum/ai/test/Thread.browser.test.tsx
+++ b/packages/@react-spectrum/ai/test/Chat.browser.test.tsx
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {Chat, Thread, ThreadItem} from '../src/Chat';
 import {describe, expect, it} from 'vitest';
 import React from 'react';
 import {render} from 'vitest-browser-react';
-import {Thread, ThreadItem, ThreadList} from '../src/Thread';
 import {userEvent} from 'vitest/browser';
 
 interface Message {
@@ -21,7 +21,8 @@ interface Message {
   text: string;
 }
 
-describe('Thread browser', () => {
+const describeOrSkip = parseInt(React.version, 10) < 19 ? describe.skip : describe;
+describeOrSkip('Chat browser', () => {
   describe('spatial navigation', () => {
     // This test is flaky in Firefox. Skipping for now.
     it.skip('navigates between items in spatial order via arrow keys', async () => {
@@ -32,11 +33,11 @@ describe('Thread browser', () => {
       ];
 
       let {container} = await render(
-        <Thread>
-          <ThreadList focusOnEntry="first" items={[...messages].reverse()} aria-label="Chat">
+        <Chat>
+          <Thread UNSTABLE_focusOnEntry="first" items={[...messages].reverse()} aria-label="Chat">
             {(item: Message) => <ThreadItem textValue={item.text}>{item.text}</ThreadItem>}
-          </ThreadList>
-        </Thread>
+          </Thread>
+        </Chat>
       );
 
       let gridlist = container.querySelector('[role=grid]') as HTMLElement;
diff --git a/packages/@react-spectrum/ai/test/Thread.test.tsx b/packages/@react-spectrum/ai/test/Chat.test.tsx
similarity index 91%
rename from packages/@react-spectrum/ai/test/Thread.test.tsx
rename to packages/@react-spectrum/ai/test/Chat.test.tsx
index aa265b7fb63..0eb80668e2a 100644
--- a/packages/@react-spectrum/ai/test/Thread.test.tsx
+++ b/packages/@react-spectrum/ai/test/Chat.test.tsx
@@ -14,9 +14,10 @@ jest.mock('react-aria/src/live-announcer/LiveAnnouncer');
 
 import {act, fireEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import {announce} from 'react-aria/private/live-announcer/LiveAnnouncer';
-import {Button, Input, TextField} from 'react-aria-components';
+import {Button} from 'react-aria-components';
+import {Chat, Thread, ThreadItem, ThreadScrollButton} from '../src/Chat';
+import {PromptField, PromptTokenField} from '../src/PromptField';
 import React from 'react';
-import {Thread, ThreadItem, ThreadList, ThreadScrollButton} from '../src/Thread';
 import userEvent from '@testing-library/user-event';
 
 interface Message {
@@ -27,33 +28,33 @@ interface Message {
 
 function TestThread({
   messages,
-  focusOnEntry
+  UNSTABLE_focusOnEntry
 }: {
   messages: Message[];
-  focusOnEntry?: 'first' | 'last';
+  UNSTABLE_focusOnEntry?: 'first' | 'last';
 }) {
   return (
-    <Thread>
+    <Chat>
       <ThreadScrollButton>
         <Button slot="scroll">Scroll to bottom</Button>
       </ThreadScrollButton>
-      <ThreadList items={messages} aria-label="Chat" focusOnEntry={focusOnEntry}>
+      <Thread items={messages} aria-label="Chat" UNSTABLE_focusOnEntry={UNSTABLE_focusOnEntry}>
         {(item: Message) => (
           <ThreadItem textValue={item.text} isStreaming={item.isStreaming}>
             {item.text}
           </ThreadItem>
         )}
-      </ThreadList>
-      <TextField slot="prompt" aria-label="Prompt input">
-        <Input />
-      </TextField>
-    </Thread>
+      </Thread>
+      <PromptField>
+        <PromptTokenField />
+      </PromptField>
+    </Chat>
   );
 }
 
 let mockAnnounce = announce as jest.MockedFunction<typeof announce>;
-
-describe('Thread', () => {
+const describeOrSkip = parseInt(React.version, 10) < 19 ? describe.skip : describe;
+describeOrSkip('Thread', () => {
   let user;
 
   beforeAll(() => {
@@ -245,10 +246,10 @@ describe('Thread', () => {
   });
 
   describe('focus behavior', () => {
-    it('focuses the first item in the list when tabbing in if focusOnEntry="first"', async () => {
+    it('focuses the first item in the list when tabbing in if UNSTABLE_focusOnEntry="first"', async () => {
       let {getByRole} = render(
         <TestThread
-          focusOnEntry="first"
+          UNSTABLE_focusOnEntry="first"
           messages={[
             {id: '1', text: 'Hello'},
             {id: '2', text: 'World'}
@@ -273,10 +274,10 @@ describe('Thread', () => {
       expect(document.activeElement).toBe(rows[0]);
     });
 
-    it('focuses the last item in the list when tabbing in if focusOnEntry="last"', async () => {
+    it('focuses the last item in the list when tabbing in if UNSTABLE_focusOnEntry="last"', async () => {
       let {getByRole} = render(
         <TestThread
-          focusOnEntry="last"
+          UNSTABLE_focusOnEntry="last"
           messages={[
             {id: '1', text: 'Hello'},
             {id: '2', text: 'World'}
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index 4573d2d5331..73abdd4bb11 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -104,6 +104,7 @@ export interface TreeViewProps<T>
       | 'selectionBehavior'
       | 'onScroll'
       | 'onCellAction'
+      | 'keyboardNavigationBehavior'
       | keyof GlobalDOMAttributes
     >,
     UnsafeStyles,
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
index e5efd0212a4..2f00aba5d14 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -27,6 +27,7 @@ import {MenuItem} from '../src/Menu';
 import type {Meta, StoryObj} from '@storybook/react';
 import {SkeletonCollection} from '../src/SkeletonCollection';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {TextField} from '../src/TextField';
 import {useAsyncList} from 'react-stately/useAsyncList';
 
 const meta: Meta<typeof CardView> = {
@@ -72,7 +73,15 @@ const avatarSize = {
   XL: 32
 } as const;
 
-export function PhotoCard({item, layout}: {item: Item; layout: string}) {
+export function PhotoCard({
+  item,
+  layout,
+  interactive
+}: {
+  item: Item;
+  layout: string;
+  interactive?: React.ReactNode;
+}) {
   return (
     <Card id={item.id} textValue={item.description || item.alt_description}>
       {({size}) => (
@@ -112,12 +121,20 @@ export function PhotoCard({item, layout}: {item: Item; layout: string}) {
             <div
               className={style({
                 display: 'flex',
-                alignItems: 'center',
+                flexDirection: 'column',
                 gap: 8,
                 gridArea: 'description'
               })}>
-              <Avatar src={item.user.profile_image.small} size={avatarSize[size]} />
-              <Text slot="description">{item.user.name}</Text>
+              <div
+                className={style({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8
+                })}>
+                <Avatar src={item.user.profile_image.small} size={avatarSize[size]} />
+                <Text slot="description">{item.user.name}</Text>
+              </div>
+              {interactive}
             </div>
           </Content>
         </>
@@ -126,7 +143,7 @@ export function PhotoCard({item, layout}: {item: Item; layout: string}) {
   );
 }
 
-export const ExampleRender = (args: CardViewProps<any>) => {
+export const ExampleRender = (args: CardViewProps<any> & {interactive?: React.ReactNode}) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -155,7 +172,9 @@ export const ExampleRender = (args: CardViewProps<any>) => {
       onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
       styles={cardViewStyles}>
       <Collection items={items} dependencies={[args.layout]}>
-        {item => <PhotoCard item={item} layout={args.layout || 'grid'} />}
+        {item => (
+          <PhotoCard interactive={args.interactive} item={item} layout={args.layout || 'grid'} />
+        )}
       </Collection>
       {(loadingState === 'loading' || loadingState === 'loadingMore') && (
         <SkeletonCollection>
@@ -288,3 +307,14 @@ export const CollectionCards: Story = {
     onAction: undefined
   }
 };
+
+export const CardViewWithTextField: Story = {
+  render: args => (
+    <ExampleRender {...args} interactive={<TextField aria-label="search photos" />} />
+  ),
+  args: {
+    loadingState: 'idle',
+    onAction: undefined,
+    selectionMode: 'multiple'
+  }
+};
diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json
index af2b357bd21..5470e7669d1 100644
--- a/packages/dev/s2-docs/package.json
+++ b/packages/dev/s2-docs/package.json
@@ -44,6 +44,7 @@
     "remark-stringify": "^11.0.0",
     "satori": "^0.16.1",
     "sharp": "^0.33.5",
+    "textarea-caret": "^3.1.0",
     "tree-sitter-highlight": "^1.0.1",
     "ts-morph": "^26.0.0",
     "unified": "^11.0.5",
diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index 2400f9026bd..290e3affd82 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -1103,6 +1103,137 @@ function AsyncLoadingExample() {
 }
 ```
 
+## Inline completions
+
+Set the Autocomplete `inputValue` to a substring of the full input value to enable inline completions such as @mentions. Completions can be displayed in a popover by controlling its `isOpen` state. For inline suggestions, use the `getTargetRect` prop to position the popover relative to the anchor character.
+
+```tsx render
+"use client";
+import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete';
+import {TextArea} from 'vanilla-starter/TextField';
+import {Popover} from 'vanilla-starter/Popover';
+import {Menu, MenuItem} from 'vanilla-starter/Menu';
+import {useState, useRef} from 'react';
+import {flushSync} from 'react-dom';
+import getCaretRect from 'textarea-caret';
+
+/*- begin collapse -*/
+const usernames = [
+  'alexmiller',
+  'sarahjones',
+  'davidkim',
+  'emmawatson',
+  'oliverliu',
+  'ellagreen',
+  'lucasbrown',
+  'amandarivera',
+  'masonlee',
+  'nataliasmith',
+  'benjamintaylor',
+  'zoewilson',
+  'henrywalker',
+  'madelineyoung',
+  'noahscott',
+  'lucygonzalez',
+  'jacobmartin',
+  'averymoore',
+  'loganmurphy',
+  'miahernandez',
+  'danieladair',
+  'sofiacox',
+  'jackharris',
+  'chloebaker',
+  'liamrodriguez'
+];
+/*- end collapse -*/
+
+function Example() {
+  let {startsWith} = useFilter({sensitivity: 'base'});
+  let [inputValue, setInputValue] = useState('');
+  let [anchorIndex, setAnchorIndex] = useState(-1);
+  let [filterValue, setFilterValue] = useState('');
+  let inputRef = useRef<HTMLTextAreaElement>(null);
+
+  let updateFilter = () => {
+    let {selectionStart, selectionEnd, value} = inputRef.current!;
+    if (selectionStart === selectionEnd && document.activeElement === inputRef.current!) {
+      // The current filter value is the substring between 
+      // the anchor character '@' and the caret position.
+      let index = value.lastIndexOf('@', selectionStart);
+      if (index >= 0) {
+        let slice = value.slice(index + 1, selectionStart);
+        // Spaces are not allowed in the filter value.
+        if (!slice.includes(' ')) { 
+          setAnchorIndex(index);
+          setFilterValue(slice);
+          return;
+        }
+      }
+    }
+
+    // Reset the anchor index, but not the filter value so 
+    // that the menu does not flicker during the close animation.
+    setAnchorIndex(-1);
+  };
+  
+  return (
+    /*- begin highlight -*/
+    // Pass the filter substring to Autocomplete.
+    <Autocomplete inputValue={filterValue} filter={startsWith}>
+    {/*- end highlight -*/}
+      <TextArea
+        label="Comment"
+        placeholder="Type @ for autocomplete"
+        style={{width: '100%'}}
+        /*- begin highlight -*/
+        // Pass the full input value to the TextArea.
+        value={inputValue}
+        /*- end highlight -*/
+        onChange={value => {
+          setInputValue(value);
+          updateFilter();
+        }}
+        onSelect={updateFilter}
+        onBlur={updateFilter}
+        inputRef={inputRef} />
+      <Popover
+        triggerRef={inputRef}
+        /*- begin highlight -*/
+        // Open the popover when there is an active anchor character.
+        isOpen={anchorIndex >= 0}
+        /*- end highlight -*/
+        isNonModal
+        placement="bottom start"
+        trigger="MenuTrigger"
+        /*- begin highlight -*/
+        // Calculate the position of the popover relative to the anchor character.
+        getTargetRect={target => {
+          let {top, left} = getCaretRect(inputRef.current!, anchorIndex!);
+          let {top: targetTop, left: targetLeft} = target.getBoundingClientRect();
+          return new DOMRect(targetLeft + left, targetTop + top, 1, 16);
+        }}>
+        {/*- end highlight -*/}
+        <Menu
+          items={usernames}
+          renderEmptyState={() => 'No results found.'}
+          onAction={value => {
+            /*- begin highlight -*/
+            // Insert the completion at the anchor index and update the caret position.
+            let prefix = inputValue.slice(0, anchorIndex!) + '@' + value + ' ';
+            let suffix = inputValue.slice(inputRef.current!.selectionEnd!);
+            flushSync(() => setInputValue(prefix + suffix));
+            inputRef.current!.setSelectionRange(prefix.length, prefix.length);
+            updateFilter();
+            /*- end highlight -*/
+          }}>
+          {(item) => <MenuItem id={item}>{item}</MenuItem>}
+        </Menu>
+      </Popover>
+    </Autocomplete>
+  );
+}
+```
+
 ## Examples
 
 <ExampleList tag="autocomplete" pages={props.pages} />
diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
index c9511c40470..74464237e46 100644
--- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
@@ -672,7 +672,7 @@ function Example(props) {
 
 Use the `layout` and `orientation` props to arrange items in horizontal and vertical stacks and grids. This affects keyboard navigation and drag and drop behavior.
 
-```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'orientation', 'keyboardNavigationBehavior']} initialProps={{layout: 'grid', orientation: 'horizontal', keyboardNavigationBehavior: 'tab'}} wide
+```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'orientation']} initialProps={{layout: 'grid', orientation: 'horizontal'}} wide
 "use client";
 import {GridList, GridListItem, Text} from 'vanilla-starter/GridList';
 
@@ -704,6 +704,56 @@ let photos = [
 </GridList>
 ```
 
+## Keyboard navigation
+
+By default, GridList uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Tab</Keyboard> move focus in and out of a row.
+Use this when rows contain interactive elements such as text fields, where arrow keys and typing in the field should not trigger grid navigation or selection.
+
+```tsx render
+"use client";
+import {GridList, GridListItem, Text} from 'vanilla-starter/GridList';
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+
+///- begin collapse -///
+///- begin collapse -///
+let photos = [
+  {id: 1, title: 'Desert Sunset', description: 'PNG • 2/3/2024', src: 'https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop'},
+  {id: 2, title: 'Hiking Trail', description: 'JPEG • 1/10/2022', src: 'https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop'},
+  {id: 3, title: 'Lion', description: 'JPEG • 8/28/2021', src: 'https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop'},
+  {id: 4, title: 'Mountain Sunrise', description: 'PNG • 3/15/2015', src: 'https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop'},
+  {id: 5, title: 'Giraffe tongue', description: 'PNG • 11/27/2019', src: 'https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop'},
+  {id: 6, title: 'Golden Hour', description: 'WEBP • 7/24/2024', src: 'https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop'},
+];
+
+function PermissionPicker({label}) {
+  return (
+    <ComboBox style={{paddingInlineStart: 12, width: '80%'}} aria-label={label} defaultSelectedKey="view" placeholder="Permission">
+      <ComboBoxItem id="view">Can view</ComboBoxItem>
+      <ComboBoxItem id="comment">Can comment</ComboBoxItem>
+      <ComboBoxItem id="edit">Can edit</ComboBoxItem>
+    </ComboBox>
+  );
+}
+///- end collapse -///
+
+<GridList
+  /*- begin highlight -*/
+  keyboardNavigationBehavior="tab"
+  /*- end highlight -*/
+  items={photos}
+  selectionMode="multiple"
+  aria-label="Shared files">
+    {item => (
+    <GridListItem textValue={item.title}>
+      <img src={item.src} alt="" />
+      <Text>{item.title}</Text>
+      <Text slot="description">{item.description}</Text>
+      <PermissionPicker label={`${item.title} permission`} />
+    </GridListItem>
+  )}
+</GridList>
+```
+
 ## Drag and drop
 
 GridList supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the <TypeLink links={docs.links} type={docs.exports.useDragAndDrop} /> hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the [drag and drop guide](dnd?component=GridList) to learn more.
diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
index 9094137b4c2..fd54f04e616 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -257,7 +257,7 @@ import {Tree, TreeHeader, TreeItem, TreeSection} from 'vanilla-starter/Tree';
     <TreeItem id="shared-photos" title="Shared Photos">
       <TreeItem id="shared-photo-1" title="Shared Photo 1" />
       <TreeItem id="shared-photo-2" title="Shared Photo 2" />
-    </TreeItem> 
+    </TreeItem>
   </TreeSection>
   <TreeSection>
     <TreeHeader>Documents</TreeHeader>
@@ -322,6 +322,61 @@ function Example(props) {
 }
 ```
 
+## Keyboard navigation
+
+By default, Tree uses arrow key navigation to move focus into rows. Set `keyboardNavigationBehavior="tab"` to have <Keyboard>Tab</Keyboard> move focus in and out of a row.
+Use this when rows contain interactive elements such as text fields, where arrow keys and typing in the field should not trigger grid navigation or selection.
+
+```tsx render
+"use client";
+import {Tree, TreeItem, TreeItemContent} from 'vanilla-starter/Tree';
+import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox';
+
+///- begin collapse -///
+function PermissionPicker({label}) {
+  return (
+    <ComboBox style={{marginInlineStart: 'auto', flexShrink: 0}} aria-label={label} defaultSelectedKey="view" placeholder="Permission">
+      <ComboBoxItem id="view">Can view</ComboBoxItem>
+      <ComboBoxItem id="comment">Can comment</ComboBoxItem>
+      <ComboBoxItem id="edit">Can edit</ComboBoxItem>
+    </ComboBox>
+  );
+}
+///- end collapse -///
+
+<Tree
+  /*- begin highlight -*/
+  keyboardNavigationBehavior="tab"
+  /*- end highlight -*/
+  selectionMode="multiple"
+  defaultExpandedKeys={['documents', 'photos']}
+  aria-label="Shared files"
+  style={{width: 420}}>
+  <TreeItem id="documents" title="Documents">
+    <TreeItem id="weekly" textValue="Weekly Report.pdf">
+      <TreeItemContent>
+        Weekly Report.pdf
+        <PermissionPicker label="Weekly Report.pdf permission" />
+      </TreeItemContent>
+    </TreeItem>
+    <TreeItem id="budget" textValue="Budget.xlsx">
+      <TreeItemContent>
+        Budget.xlsx
+        <PermissionPicker label="Budget.xlsx permission" />
+      </TreeItemContent>
+    </TreeItem>
+  </TreeItem>
+  <TreeItem id="photos" title="Photos">
+    <TreeItem id="sunset" textValue="Sunset.jpg">
+      <TreeItemContent>
+        Sunset.jpg
+        <PermissionPicker label="Sunset.jpg permission" />
+      </TreeItemContent>
+    </TreeItem>
+  </TreeItem>
+</Tree>
+```
+
 ## Drag and drop
 
 Tree supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the <TypeLink links={docs.links} type={docs.exports.useDragAndDrop} /> hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the [drag and drop guide](dnd?component=Tree) to learn more.
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index ba13f7af6f5..cc24494e875 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -210,7 +210,7 @@ export interface GridListProps<T>
    *
    * @private
    */
-  focusOnEntry?: 'first' | 'last';
+  UNSTABLE_focusOnEntry?: 'first' | 'last';
 }
 
 export const GridListContext =
@@ -242,9 +242,14 @@ interface GridListInnerProps<T> {
 
 function GridListInner<T>({props, collection, gridListRef: ref}: GridListInnerProps<T>) {
   [props, ref] = useContextProps(props, ref, SelectableCollectionContext);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {shouldUseVirtualFocus, filter, disallowTypeAhead, focusOnEntry, ...DOMCollectionProps} =
-    props;
+  let {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    shouldUseVirtualFocus,
+    filter,
+    disallowTypeAhead,
+    UNSTABLE_focusOnEntry,
+    ...DOMCollectionProps
+  } = props;
   let {
     dragAndDropHooks,
     keyboardNavigationBehavior = 'arrow',
@@ -303,7 +308,7 @@ function GridListInner<T>({props, collection, gridListRef: ref}: GridListInnerPr
       isVirtualized,
       shouldSelectOnPressUp: props.shouldSelectOnPressUp,
       disallowTypeAhead,
-      focusOnEntry
+      UNSTABLE_focusOnEntry
     },
     filteredState,
     ref
diff --git a/packages/react-aria-components/stories/GridList.stories.tsx b/packages/react-aria-components/stories/GridList.stories.tsx
index 7c42b76baf4..9710c97e31f 100644
--- a/packages/react-aria-components/stories/GridList.stories.tsx
+++ b/packages/react-aria-components/stories/GridList.stories.tsx
@@ -12,9 +12,10 @@
 
 import {action} from 'storybook/actions';
 import {Button} from '../src/Button';
-import {Checkbox, CheckboxProps} from '../src/Checkbox';
+import {Checkbox, CheckboxGroup, CheckboxProps} from '../src/Checkbox';
 import {classNames} from '@adobe/react-spectrum/private/utils/classNames';
 import {Collection} from 'react-aria/Collection';
+import {ComboBox} from '../src/ComboBox';
 import {Dialog, DialogTrigger} from '../src/Dialog';
 import {DropIndicator, useDragAndDrop} from '../src/useDragAndDrop';
 import {GridLayout} from '../src/GridLayout';
@@ -28,10 +29,13 @@ import {
   GridListSection
 } from '../src/GridList';
 import {Heading} from '../src/Heading';
+import {Input} from '../src/Input';
 import {Key} from '@react-types/shared';
+import {ListBox} from '../src/ListBox';
 import {ListLayout, Size, WaterfallLayout} from 'react-stately/useVirtualizerState';
-import {LoadingSpinner} from './utils';
+import {LoadingSpinner, MyListBoxItem} from './utils';
 import {LoadingState} from '@react-types/shared';
+import {Menu, MenuItem, MenuTrigger} from '../src/Menu';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {Modal, ModalOverlay, ModalOverlayProps} from '../src/Modal';
 import {Popover} from '../src/Popover';
@@ -39,10 +43,13 @@ import React, {JSX, useState} from 'react';
 import styles from '../example/index.css';
 import {Tag, TagGroup, TagList} from '../src/TagGroup';
 import {Text} from '../src/Text';
+import {TextField} from '../src/TextField';
+import {Toolbar} from '../src/Toolbar';
 import {useAsyncList} from 'react-stately/useAsyncList';
 import {useListData} from 'react-stately/useListData';
 import {Virtualizer} from '../src/Virtualizer';
 import './styles.css';
+import {Radio, RadioGroup} from '../src/RadioGroup';
 
 export default {
   title: 'React Aria Components/GridList',
@@ -312,13 +319,21 @@ GridListSectionExample.story = {
 };
 
 export function VirtualizedGridListSection() {
-  let sections: {id: string; name: string; children: {id: string; name: string}[]}[] = [];
+  let sections: {
+    id: string;
+    name: string;
+    children: {id: string; name: string}[];
+  }[] = [];
   for (let s = 0; s < 10; s++) {
     let items: {id: string; name: string}[] = [];
     for (let i = 0; i < 3; i++) {
       items.push({id: `item_${s}_${i}`, name: `Section ${s}, Item ${i}`});
     }
-    sections.push({id: `section_${s}`, name: `Section ${s}`, children: items});
+    sections.push({
+      id: `section_${s}`,
+      name: `Section ${s}`,
+      children: items
+    });
   }
 
   return (
@@ -360,7 +375,9 @@ const VirtualizedGridListRender = (args: GridListProps<any> & {isLoading: boolea
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems: keys => {
-      return [...keys].map(key => ({'text/plain': list.getItem(key)?.name ?? ''}));
+      return [...keys].map(key => ({
+        'text/plain': list.getItem(key)?.name ?? ''
+      }));
     },
     onReorder(e) {
       if (e.target.dropPosition === 'before') {
@@ -953,3 +970,174 @@ export const AsyncGridListGridVirtualized: StoryObj<typeof AsyncGridListGridVirt
     }
   }
 };
+
+let comboboxEmptyState = () => {
+  return <div style={{height: 30, width: '100%'}}>No results</div>;
+};
+
+export const GridListWithTextfield: GridListStory = args => {
+  let isHorizontalStack = args.orientation === 'horizontal' && args.layout !== 'grid';
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <input aria-label="input before gridlist" />
+      <GridList
+        className={styles.menu}
+        aria-label="gridlist with textfield"
+        keyboardNavigationBehavior="tab"
+        style={{
+          width: isHorizontalStack ? undefined : 400,
+          height: isHorizontalStack ? undefined : 400,
+          display: isHorizontalStack ? 'flex' : 'grid',
+          gridTemplate: args.layout === 'grid' ? 'repeat(3, 1fr) / repeat(3, 1fr)' : 'auto / 1fr',
+          gridAutoFlow: args.orientation === 'horizontal' ? 'column' : 'row'
+        }}
+        {...args}>
+        <MyGridListItem textValue="Rac TextField">
+          RAC TextField
+          <TextField aria-label="Name">
+            <Input />
+          </TextField>
+        </MyGridListItem>
+        <MyGridListItem textValue="Rac input">
+          Raw input <input aria-label="Raw text input" style={{marginLeft: 4}} />
+        </MyGridListItem>
+        <MyGridListItem textValue="TextField + Button">
+          TextField + Button
+          <TextField aria-label="Search">
+            <Input />
+          </TextField>{' '}
+          <Button>Go</Button>
+        </MyGridListItem>
+        <MyGridListItem textValue="Combobox">
+          ComboBox
+          <ComboBox aria-label="combobox" allowsEmptyCollection>
+            <div style={{display: 'flex'}}>
+              <Input />
+              <Button>
+                <span aria-hidden="true" style={{padding: '0 2px'}}>
+                  ▼
+                </span>
+              </Button>
+            </div>
+            <Popover>
+              <ListBox
+                renderEmptyState={comboboxEmptyState}
+                data-testid="combo-box-list-box"
+                className={styles.menu}
+                style={{width: 'var(--trigger-width)'}}>
+                <MyListBoxItem>Foo</MyListBoxItem>
+                <MyListBoxItem>Bar</MyListBoxItem>
+                <MyListBoxItem>Baz</MyListBoxItem>
+                <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+              </ListBox>
+            </Popover>
+          </ComboBox>
+        </MyGridListItem>
+        <MyGridListItem textValue="Toolbar">
+          Toolbar
+          <Toolbar aria-label="Text formatting" style={{gap: 4}}>
+            <Button onPress={action('Bold press')}>Bold</Button>
+            <Button onPress={action('Italics press')}>Italic</Button>
+            <Button onPress={action('Underline press')}>Underline</Button>
+          </Toolbar>
+        </MyGridListItem>
+        <MyGridListItem textValue="Menu">
+          Menu
+          {/* TODO: hitting escape to close the menu, returns focus to the row.
+          Tabbing back from the external input also focuses the trggerbutton rather than the row. Tabbing back into the textfield row focuses the row  */}
+          <MenuTrigger>
+            <Button aria-label="Options">▾</Button>
+            <Popover>
+              <Menu className={styles.menu}>
+                <MenuItem>Cut</MenuItem>
+                <MenuItem>Copy</MenuItem>
+                <MenuItem>Paste</MenuItem>
+              </Menu>
+            </Popover>
+          </MenuTrigger>
+        </MyGridListItem>
+        <MyGridListItem textValue="Radiogroup">
+          RadioGroup
+          <RadioGroup
+            aria-label="Radiogroup"
+            className={styles.radiogroup}
+            style={{flexDirection: 'row'}}>
+            <Radio className={styles.radio} value="dogs" data-testid="radio-dog">
+              Dog
+            </Radio>
+            <Radio className={styles.radio} value="cats">
+              Cat
+            </Radio>
+            <Radio className={styles.radio} value="dragon">
+              Dragon
+            </Radio>
+          </RadioGroup>
+        </MyGridListItem>
+        <MyGridListItem textValue="Checkboxgroup">
+          CheckboxGroup
+          <CheckboxGroup aria-label="Checkboxgroup" style={{display: 'flex', flexDirection: 'row'}}>
+            <Checkbox value="soccer">
+              <div className="checkbox" aria-hidden="true">
+                <svg viewBox="0 0 18 18">
+                  <polyline points="1 9 7 14 15 4" />
+                </svg>
+              </div>
+              Soccer
+            </Checkbox>
+            <Checkbox value="baseball">
+              <div className="checkbox" aria-hidden="true">
+                <svg viewBox="0 0 18 18">
+                  <polyline points="1 9 7 14 15 4" />
+                </svg>
+              </div>
+              Baseball
+            </Checkbox>
+            <Checkbox value="basketball">
+              <div className="checkbox" aria-hidden="true">
+                <svg viewBox="0 0 18 18">
+                  <polyline points="1 9 7 14 15 4" />
+                </svg>
+              </div>
+              Basketball
+            </Checkbox>
+          </CheckboxGroup>
+        </MyGridListItem>
+      </GridList>
+      <input aria-label="input after gridlist" />
+    </div>
+  );
+};
+
+GridListWithTextfield.story = {
+  args: {
+    layout: 'stack',
+    orientation: 'vertical',
+    escapeKeyBehavior: 'clearSelection'
+  },
+  argTypes: {
+    layout: {
+      control: 'radio',
+      options: ['stack', 'grid']
+    },
+    orientation: {
+      control: 'radio',
+      options: ['vertical', 'horizontal']
+    },
+    keyboardNavigationBehavior: {
+      control: 'radio',
+      options: ['arrow', 'tab']
+    },
+    selectionMode: {
+      control: 'radio',
+      options: ['none', 'single', 'multiple']
+    },
+    selectionBehavior: {
+      control: 'radio',
+      options: ['toggle', 'replace']
+    },
+    escapeKeyBehavior: {
+      control: 'radio',
+      options: ['clearSelection', 'none']
+    }
+  }
+};
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index 4e305216973..b5920c692f6 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -15,18 +15,21 @@ import {Button} from '../src/Button';
 import {Checkbox, CheckboxProps} from '../src/Checkbox';
 import {classNames} from '@adobe/react-spectrum/private/utils/classNames';
 import {Collection} from 'react-aria/Collection';
+import {ComboBox} from '../src/ComboBox';
 import {DroppableCollectionReorderEvent, Key} from '@react-types/shared';
+import {Input} from '../src/Input';
 import {isTextDropItem, useDragAndDrop} from '../exports/useDragAndDrop';
+import {ListBox} from '../src/ListBox';
 import {ListLayout} from 'react-stately/useVirtualizerState';
-import {Menu, MenuTrigger} from '../src/Menu';
-
+import {Menu, MenuItem, MenuTrigger} from '../src/Menu';
 import {Meta, StoryFn, StoryObj} from '@storybook/react';
-
-import {MyMenuItem} from './utils';
+import {MyListBoxItem, MyMenuItem} from './utils';
 import {Popover} from '../src/Popover';
 import React, {JSX, ReactNode, useCallback, useState} from 'react';
 import styles from '../example/index.css';
 import {Text} from '../src/Text';
+import {TextField} from '../src/TextField';
+import {Toolbar} from '../src/Toolbar';
 import {
   Tree,
   TreeHeader,
@@ -46,7 +49,7 @@ import './styles.css';
 export default {
   title: 'React Aria Components/Tree',
   component: Tree,
-  excludeStories: ['TreeExampleStaticRender']
+  excludeStories: ['TreeExampleStaticRender', 'TreeWithTextField']
 } as Meta<typeof Tree>;
 
 export type TreeStory = StoryFn<typeof Tree>;
@@ -54,6 +57,7 @@ export type TreeStory = StoryFn<typeof Tree>;
 interface StaticTreeItemProps extends TreeItemProps {
   title?: string;
   children: ReactNode;
+  interactive?: ReactNode;
 }
 
 interface MyCheckboxProps extends CheckboxProps {
@@ -117,6 +121,7 @@ const StaticTreeItem = (props: StaticTreeItemProps) => {
                 </Button>
               )}
               <Text className={styles.title}>{props.title || props.children}</Text>
+              {props.interactive}
               <Button className={styles.button} aria-label="Info" onPress={action('Info press')}>
                 ⓘ
               </Button>
@@ -1801,3 +1806,155 @@ export const HugeVirtualizedTree: StoryObj<typeof VirtualizedTreeRender> = {
   },
   render: args => <HugeVirtualizedTreeRender {...args} />
 };
+
+let comboboxEmptyState = () => {
+  return <div style={{height: 30, width: '100%'}}>No results</div>;
+};
+
+export function TreeWithTextField<T>(props: TreeProps<T>) {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <input aria-label="Before tree" />
+      <Tree
+        className={styles.tree}
+        style={{width: 400}}
+        aria-label="tree with textfields"
+        disabledKeys={['rawinput']}
+        keyboardNavigationBehavior="tab"
+        {...props}>
+        <StaticTreeItem
+          id="textfield"
+          textValue="RAC TextField"
+          interactive={
+            <TextField aria-label="Name">
+              <Input />
+            </TextField>
+          }>
+          RAC TextField
+        </StaticTreeItem>
+        <StaticTreeItem
+          id="rawinput"
+          textValue="Raw input"
+          interactive={<input aria-label="Raw text input" />}>
+          Raw input
+        </StaticTreeItem>
+        <StaticTreeItem
+          id="row1"
+          textValue="row 1"
+          title="row 1"
+          interactive={
+            <TextField aria-label="row 1 input">
+              <Input />
+            </TextField>
+          }>
+          <StaticTreeItem
+            id="group1-textfield-button"
+            textValue="TextField and Button"
+            interactive={
+              <>
+                <TextField aria-label="Search">
+                  <Input />
+                </TextField>
+                <Button>Go</Button>
+              </>
+            }>
+            TextField + Button
+          </StaticTreeItem>
+          <StaticTreeItem
+            id="group1-toolbar"
+            textValue="Toolbar"
+            interactive={
+              <Toolbar aria-label="Text formatting" style={{gap: 4}}>
+                <Button onPress={action('Bold press')}>Bold</Button>
+                <Button onPress={action('Italics press')}>Italic</Button>
+                <Button onPress={action('Underline press')}>Underline</Button>
+              </Toolbar>
+            }>
+            Toolbar
+          </StaticTreeItem>
+          <StaticTreeItem
+            id="group1-nested"
+            textValue="Nested Group"
+            title="Nested Group"
+            interactive={<input aria-label="Nested group input" />}>
+            <StaticTreeItem
+              id="group1-nested-1"
+              textValue="Nested child 1"
+              interactive={
+                <ComboBox aria-label="combobox" allowsEmptyCollection>
+                  <div style={{display: 'flex'}}>
+                    <Input />
+                    <Button>
+                      <span aria-hidden="true" style={{padding: '0 2px'}}>
+                        ▼
+                      </span>
+                    </Button>
+                  </div>
+                  <Popover>
+                    <ListBox
+                      renderEmptyState={comboboxEmptyState}
+                      data-testid="combo-box-list-box"
+                      className={styles.menu}
+                      style={{width: 'var(--trigger-width)'}}>
+                      <MyListBoxItem>Foo</MyListBoxItem>
+                      <MyListBoxItem>Bar</MyListBoxItem>
+                      <MyListBoxItem>Baz</MyListBoxItem>
+                      <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </ComboBox>
+              }>
+              Nested child 1
+            </StaticTreeItem>
+            <StaticTreeItem
+              id="group1-nested-2"
+              textValue="Nested child 2"
+              interactive={
+                <MenuTrigger>
+                  <Button aria-label="Options">▾</Button>
+                  <Popover>
+                    <Menu className={styles.menu}>
+                      <MenuItem>Cut</MenuItem>
+                      <MenuItem>Copy</MenuItem>
+                      <MenuItem>Paste</MenuItem>
+                    </Menu>
+                  </Popover>
+                </MenuTrigger>
+              }>
+              Nested child 2
+            </StaticTreeItem>
+          </StaticTreeItem>
+        </StaticTreeItem>
+      </Tree>
+      <input aria-label="After tree" />
+    </div>
+  );
+}
+
+export const TreeWithTextFieldStory: StoryObj<typeof TreeWithTextField> = {
+  render: args => <TreeWithTextField {...args} />,
+  args: {
+    selectionMode: 'none',
+    selectionBehavior: 'toggle',
+    disabledBehavior: 'selection'
+  },
+  argTypes: {
+    keyboardNavigationBehavior: {
+      control: 'radio',
+      options: ['arrow', 'tab']
+    },
+    selectionMode: {
+      control: 'radio',
+      options: ['none', 'single', 'multiple']
+    },
+    selectionBehavior: {
+      control: 'radio',
+      options: ['toggle', 'replace']
+    },
+    disabledBehavior: {
+      control: 'radio',
+      options: ['selection', 'all']
+    }
+  },
+  name: 'Tree with Textfield'
+};
diff --git a/packages/react-aria-components/test/GridList.test.js b/packages/react-aria-components/test/GridList.test.js
index 5875fe1bd51..c5df18a2ff8 100644
--- a/packages/react-aria-components/test/GridList.test.js
+++ b/packages/react-aria-components/test/GridList.test.js
@@ -22,6 +22,7 @@ import {
 import {Checkbox as AriaCheckbox, CheckboxButton, CheckboxField} from '../src/Checkbox';
 import {Button} from '../src/Button';
 import {Collection} from 'react-aria/Collection';
+import {ComboBox} from '../src/ComboBox';
 import {Dialog, DialogTrigger} from '../src/Dialog';
 import {DropIndicator, useDragAndDrop} from '../src/useDragAndDrop';
 import {getFocusableTreeWalker} from 'react-aria/private/focus/FocusScope';
@@ -33,13 +34,17 @@ import {
   GridListSection
 } from '../src/GridList';
 import {GridListLoadMoreItem} from '../src/GridList';
+import {Input} from '../src/Input';
 import {installPointerEvent, User} from '@react-aria/test-utils';
 import {Label} from '../src/Label';
+import {ListBox, ListBoxItem} from '../src/ListBox';
 import {ListLayout} from 'react-stately/useVirtualizerState';
 import {Modal} from '../src/Modal';
+import {Popover} from '../src/Popover';
 import React from 'react';
 import {RouterProvider} from 'react-aria/private/utils/openLink';
 import {Tag, TagGroup, TagList} from '../src/TagGroup';
+import {Toolbar} from '../src/Toolbar';
 import userEvent from '@testing-library/user-event';
 import {Virtualizer} from '../src/Virtualizer';
 
@@ -1833,4 +1838,248 @@ describe('GridList', () => {
       }
     );
   });
+
+  describe('tab navigation and textfields', () => {
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should not navigate rows when arrow keys are pressed while a text input child has focus (%s)',
+      async (_, listProps) => {
+        let {getByRole} = render(
+          <GridList aria-label="Test" {...listProps}>
+            <GridListItem id="item1" textValue="Apple">
+              Apple <input aria-label="input 1" />
+            </GridListItem>
+            <GridListItem id="item2" textValue="Banana">
+              Banana
+            </GridListItem>
+          </GridList>
+        );
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+        let input = getByRole('textbox');
+
+        await user.tab();
+        expect(document.activeElement).toBe(rows[0]);
+        await user.tab();
+        expect(document.activeElement).toBe(input);
+
+        await user.keyboard('{ArrowDown}');
+        expect(document.activeElement).toBe(input);
+        await user.keyboard('{ArrowUp}');
+        expect(document.activeElement).toBe(input);
+        await user.keyboard('{ArrowRight}');
+        expect(document.activeElement).toBe(input);
+        await user.keyboard('{ArrowLeft}');
+        expect(document.activeElement).toBe(input);
+      }
+    );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should not trigger typeahead when typing in a text input child (%s)',
+      async (_, listProps) => {
+        let {getByRole} = render(
+          <GridList aria-label="Test" {...listProps}>
+            <GridListItem id="item1" textValue="Apple">
+              Apple <input aria-label="input 1" />
+            </GridListItem>
+            <GridListItem id="item2" textValue="Banana">
+              Banana
+            </GridListItem>
+          </GridList>
+        );
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+        let input = getByRole('textbox');
+
+        await user.tab();
+        expect(document.activeElement).toBe(rows[0]);
+        await user.tab();
+        expect(document.activeElement).toBe(input);
+
+        await user.keyboard('b');
+        expect(document.activeElement).toBe(input);
+        expect(input).toHaveValue('b');
+      }
+    );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should not trigger selection when pressing Space or Enter in a text input child (%s)',
+      async (_, listProps) => {
+        let onSelectionChange = jest.fn();
+        let {getByRole} = render(
+          <GridList
+            aria-label="Test"
+            {...listProps}
+            selectionMode="multiple"
+            onSelectionChange={onSelectionChange}>
+            <GridListItem id="item1" textValue="Apple">
+              Apple <input aria-label="input 1" />
+            </GridListItem>
+            <GridListItem id="item2" textValue="Banana">
+              Banana
+            </GridListItem>
+          </GridList>
+        );
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+        let input = getByRole('textbox');
+
+        await user.tab();
+        expect(document.activeElement).toBe(rows[0]);
+        await user.tab();
+        expect(document.activeElement).toBe(input);
+
+        await user.keyboard(' ');
+        expect(input).toHaveValue(' ');
+        expect(onSelectionChange).not.toHaveBeenCalled();
+
+        await user.keyboard('{Enter}');
+        expect(onSelectionChange).not.toHaveBeenCalled();
+      }
+    );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should not trigger selection when clicking on a tabbable child element (%s)',
+      async (_, listProps) => {
+        let onSelectionChange = jest.fn();
+        let {getByRole} = render(
+          <GridList
+            aria-label="Test"
+            {...listProps}
+            selectionMode="multiple"
+            onSelectionChange={onSelectionChange}>
+            <GridListItem id="item1" textValue="Apple">
+              Apple <input aria-label="input 1" />
+            </GridListItem>
+            <GridListItem id="item2" textValue="Banana">
+              Banana
+            </GridListItem>
+          </GridList>
+        );
+
+        let input = getByRole('textbox');
+        await user.click(input);
+        expect(document.activeElement).toBe(input);
+        expect(onSelectionChange).not.toHaveBeenCalled();
+      }
+    );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should still trigger selection when clicking on a row with no tabbable children (%s)',
+      async (_, listProps) => {
+        let onSelectionChange = jest.fn();
+        let {getByRole} = render(
+          <GridList
+            aria-label="Test"
+            {...listProps}
+            selectionMode="multiple"
+            onSelectionChange={onSelectionChange}>
+            <GridListItem id="item1" textValue="Apple">
+              Apple
+            </GridListItem>
+            <GridListItem id="item2" textValue="Banana">
+              Banana
+            </GridListItem>
+          </GridList>
+        );
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+        await user.click(rows[0]);
+        expect(onSelectionChange).toHaveBeenCalledTimes(1);
+        expect(new Set(onSelectionChange.mock.calls[0][0])).toEqual(new Set(['item1']));
+      }
+    );
+
+    it.each([
+      ['keyboardNavigationBehavior="tab"', {keyboardNavigationBehavior: 'tab'}],
+      ['layout="grid"', {layout: 'grid'}]
+    ])(
+      'should exit the grid when tabbing from a combobox or toolbar, not focus the next row  (%s)',
+      async (_, listProps) => {
+        let {getByRole} = render(
+          <div>
+            <input aria-label="before" />
+            <GridList aria-label="Test" {...listProps}>
+              <GridListItem id="1" textValue="combobox">
+                <ComboBox aria-label="combobox">
+                  <Input />
+                  <Button>▼</Button>
+                  <Popover>
+                    <ListBox>
+                      <ListBoxItem>Foo</ListBoxItem>
+                      <ListBoxItem>Bar</ListBoxItem>
+                    </ListBox>
+                  </Popover>
+                </ComboBox>
+              </GridListItem>
+              <GridListItem id="2" textValue="formatting">
+                <Toolbar aria-label="formatting">
+                  <Button>Bold</Button>
+                  <Button>Italic</Button>
+                </Toolbar>
+              </GridListItem>
+              <GridListItem id="3" textValue="plain input row">
+                <input aria-label="row 2 input" />
+              </GridListItem>
+            </GridList>
+            <input aria-label="after" />
+          </div>
+        );
+
+        let combobox = getByRole('combobox');
+        let afterInput = getByRole('textbox', {name: 'after'});
+        let boldButton = getByRole('button', {name: 'Bold'});
+        let row2Input = getByRole('textbox', {name: 'row 2 input'});
+
+        let gridListTester = testUtilUser.createTester('GridList', {root: getByRole('grid')});
+        let rows = gridListTester.getRows();
+
+        await user.tab();
+        await user.tab();
+        await user.tab();
+        expect(document.activeElement).toBe(combobox);
+
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+
+        // note that shift tabbing move focus back to gridlist item not the combobox itself,
+        // will need to look into this later
+        await user.tab({shift: true});
+        expect(document.activeElement).toBe(rows[0]);
+        await user.keyboard(listProps.layout === 'grid' ? '{ArrowRight}' : '{ArrowDown}');
+        expect(document.activeElement).toBe(rows[1]);
+        await user.tab();
+        expect(document.activeElement).toBe(boldButton);
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+
+        await user.tab({shift: true});
+        expect(document.activeElement).toBe(rows[1]);
+        await user.keyboard(listProps.layout === 'grid' ? '{ArrowRight}' : '{ArrowDown}');
+        expect(document.activeElement).toBe(rows[2]);
+        await user.tab();
+        expect(document.activeElement).toBe(row2Input);
+        await user.tab();
+        expect(document.activeElement).toBe(afterInput);
+      }
+    );
+  });
 });
diff --git a/packages/react-aria-components/test/TagGroup.test.js b/packages/react-aria-components/test/TagGroup.test.js
index e94c84b7686..88c057d0abd 100644
--- a/packages/react-aria-components/test/TagGroup.test.js
+++ b/packages/react-aria-components/test/TagGroup.test.js
@@ -660,6 +660,9 @@ describe('TagGroup', () => {
     expect(onRemove).toHaveBeenCalledTimes(2);
     expect(onRemove).toHaveBeenLastCalledWith(new Set(['cat']));
 
+    await user.tab({shift: true});
+    expect(tags[0]).toHaveFocus();
+
     await user.keyboard('{ArrowRight}');
     expect(tags[1]).toHaveFocus();
 
diff --git a/packages/react-aria-components/test/Tree.test.tsx b/packages/react-aria-components/test/Tree.test.tsx
index d9072b35a17..2e0f634ad75 100644
--- a/packages/react-aria-components/test/Tree.test.tsx
+++ b/packages/react-aria-components/test/Tree.test.tsx
@@ -47,7 +47,8 @@ import {Virtualizer} from '../src/Virtualizer';
 let {
   EmptyTreeStaticStory: EmptyLoadingTree,
   LoadingStoryDepOnTopStory: LoadingMoreTree,
-  TreeWithDragAndDrop
+  TreeWithDragAndDrop,
+  TreeWithTextFieldStory
 } = composeStories(stories);
 
 let onSelectionChange = jest.fn();
@@ -2838,6 +2839,92 @@ describe('Tree', () => {
     expect(rows[18]).toHaveAttribute('aria-posinset', '1');
     expect(rows[18]).toHaveAttribute('aria-setsize', '1');
   });
+
+  describe('tab navigation and textfields', () => {
+    it('should not navigate rows when arrow keys are pressed while a text input child has focus', async () => {
+      let {getByRole} = render(<TreeWithTextFieldStory />);
+      let treeTester = testUtilUser.createTester('Tree', {root: getByRole('treegrid')});
+      let rows = treeTester.getRows();
+      let input = getByRole('textbox', {name: 'Name'});
+
+      // tab past the before tree input
+      await user.tab();
+      await user.tab();
+      expect(document.activeElement).toBe(rows[0]);
+      await user.tab();
+      expect(document.activeElement).toBe(input);
+
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(input);
+      await user.keyboard('{ArrowUp}');
+      expect(document.activeElement).toBe(input);
+      await user.keyboard('{ArrowRight}');
+      expect(document.activeElement).toBe(input);
+      await user.keyboard('{ArrowLeft}');
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('should not trigger typeahead when typing in a text input child', async () => {
+      let {getByRole} = render(<TreeWithTextFieldStory />);
+      let treeTester = testUtilUser.createTester('Tree', {root: getByRole('treegrid')});
+      let rows = treeTester.getRows();
+      let input = getByRole('textbox', {name: 'Name'});
+
+      await user.tab();
+      await user.tab();
+      expect(document.activeElement).toBe(rows[0]);
+      await user.tab();
+      expect(document.activeElement).toBe(input);
+
+      await user.keyboard('row');
+      expect(document.activeElement).toBe(input);
+      expect(input).toHaveValue('row');
+    });
+
+    it('should not trigger selection when pressing Space in a text input child of a leaf row', async () => {
+      let onSelectionChange = jest.fn();
+      let {getByRole} = render(
+        <TreeWithTextFieldStory selectionMode="multiple" onSelectionChange={onSelectionChange} />
+      );
+      let treeTester = testUtilUser.createTester('Tree', {root: getByRole('treegrid')});
+      let rows = treeTester.getRows();
+      let input = getByRole('textbox', {name: 'Name'});
+
+      await user.tab();
+      await user.tab();
+      expect(document.activeElement).toBe(rows[0]);
+      await user.tab();
+      await user.tab();
+      expect(document.activeElement).toBe(input);
+
+      await user.keyboard(' ');
+      expect(input).toHaveValue(' ');
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+
+    it('should allow typing space in the text input child of a parent row', async () => {
+      let onSelectionChange = jest.fn();
+      let {getByRole} = render(
+        <TreeWithTextFieldStory selectionMode="multiple" onSelectionChange={onSelectionChange} />
+      );
+      let treeTester = testUtilUser.createTester('Tree', {root: getByRole('treegrid')});
+      let rows = treeTester.getRows();
+
+      await user.tab();
+      await user.tab();
+      expect(document.activeElement).toBe(rows[0]);
+      await user.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
+      await user.tab();
+      await user.tab();
+      let parentInput = getByRole('textbox', {name: 'row 1 input'});
+      expect(document.activeElement).toBe(parentInput);
+
+      await user.keyboard(' ');
+      expect(parentInput).toHaveValue(' ');
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+  });
 });
 
 AriaTreeTests({
diff --git a/packages/react-aria/src/combobox/useComboBox.ts b/packages/react-aria/src/combobox/useComboBox.ts
index 4b99b2c6b9a..facfade5cfb 100644
--- a/packages/react-aria/src/combobox/useComboBox.ts
+++ b/packages/react-aria/src/combobox/useComboBox.ts
@@ -215,6 +215,10 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(
         if (e.key === 'Enter' || state.isOpen) {
           state.commit();
         }
+        if (e.key === 'Tab') {
+          e.continuePropagation();
+        }
+
         break;
       case 'Escape':
         if (!state.selectionManager.isEmpty || state.inputValue === '' || props.allowsCustomValue) {
diff --git a/packages/react-aria/src/gridlist/useGridList.ts b/packages/react-aria/src/gridlist/useGridList.ts
index 7e37629560f..6d5ba3fb0a9 100644
--- a/packages/react-aria/src/gridlist/useGridList.ts
+++ b/packages/react-aria/src/gridlist/useGridList.ts
@@ -112,7 +112,7 @@ export interface AriaGridListOptions<T> extends Omit<AriaGridListProps<T>, 'chil
    *
    * @private
    */
-  focusOnEntry?: 'first' | 'last';
+  UNSTABLE_focusOnEntry?: 'first' | 'last';
 }
 
 export interface GridListAria {
@@ -164,7 +164,7 @@ export function useGridList<T>(
     disallowTypeAhead,
     autoFocus: props.autoFocus,
     escapeKeyBehavior,
-    focusOnEntry: props.focusOnEntry
+    UNSTABLE_focusOnEntry: props.UNSTABLE_focusOnEntry
   });
 
   let id = useId(props.id);
diff --git a/packages/react-aria/src/gridlist/useGridListItem.ts b/packages/react-aria/src/gridlist/useGridListItem.ts
index d70ea835356..f352fc824f4 100644
--- a/packages/react-aria/src/gridlist/useGridListItem.ts
+++ b/packages/react-aria/src/gridlist/useGridListItem.ts
@@ -11,7 +11,6 @@
  */
 
 import {chain} from '../utils/chain';
-
 import {
   Collection,
   DOMAttributes,
@@ -30,8 +29,15 @@ import {
 import {getFocusableTreeWalker} from '../focus/FocusScope';
 import {getRowId, listMap} from './utils';
 import {getScrollParent} from '../utils/getScrollParent';
-import {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, useRef} from 'react';
+import {
+  HTMLAttributes,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  useRef
+} from 'react';
 import {isFocusVisible} from '../interactions/useFocusVisible';
+import {isTabbable} from '../utils/isFocusable';
 import type {ListState} from 'react-stately/useListState';
 import {mergeProps} from '../utils/mergeProps';
 import {scrollIntoViewport} from '../utils/scrollIntoView';
@@ -181,36 +187,10 @@ export function useGridListItem<T>(
     let walker = getFocusableTreeWalker(ref.current);
     walker.currentNode = activeElement;
 
-    if ('expandedKeys' in state && activeElement === ref.current) {
-      if (
-        e.key === EXPANSION_KEYS['expand'][direction] &&
-        state.selectionManager.focusedKey === node.key &&
-        hasChildRows &&
-        !state.expandedKeys.has(node.key)
-      ) {
-        state.toggleKey(node.key);
-        e.stopPropagation();
-        return;
-      } else if (
-        e.key === EXPANSION_KEYS['collapse'][direction] &&
-        state.selectionManager.focusedKey === node.key
-      ) {
-        // If item is collapsible, collapse it; else move to parent
-        if (hasChildRows && state.expandedKeys.has(node.key)) {
-          state.toggleKey(node.key);
-          e.stopPropagation();
-          return;
-        } else if (
-          !state.expandedKeys.has(node.key) &&
-          node.parentKey &&
-          state.collection.getItem(node.parentKey)?.type === 'item'
-        ) {
-          // Item is a leaf or already collapsed, move focus to parent
-          state.selectionManager.setFocusedKey(node.parentKey);
-          e.stopPropagation();
-          return;
-        }
-      }
+    if (
+      handleTreeExpansionKeys(e, state, node, hasChildRows, direction, activeElement, ref.current)
+    ) {
+      return;
     }
 
     switch (e.key) {
@@ -310,7 +290,7 @@ export function useGridListItem<T>(
     }
   };
 
-  let onKeyDown = e => {
+  let onKeyDown = (e: ReactKeyboardEvent) => {
     let activeElement = getActiveElement();
     if (
       !nodeContains(e.currentTarget, getEventTarget(e) as Element) ||
@@ -320,6 +300,22 @@ export function useGridListItem<T>(
       return;
     }
 
+    if (keyboardNavigationBehavior === 'tab') {
+      // Stop propagation for all events that originate from the children of the gridlist item since we don't want to trigger
+      // grid level interactions (row navigation/typeselect/etc)
+      // exception made for Tab since that needs to propagate to useSelectableCollection to tab out of the gridlist, might be others?
+      if (getEventTarget(e) !== ref.current && e.key !== 'Tab') {
+        e.stopPropagation();
+        return;
+      }
+
+      if (
+        handleTreeExpansionKeys(e, state, node, hasChildRows, direction, activeElement, ref.current)
+      ) {
+        return;
+      }
+    }
+
     switch (e.key) {
       case 'Tab': {
         if (keyboardNavigationBehavior === 'tab') {
@@ -351,8 +347,7 @@ export function useGridListItem<T>(
 
   let rowProps: DOMAttributes = mergeProps(itemProps, linkProps, {
     role: 'row',
-    onKeyDownCapture,
-    onKeyDown,
+    onKeyDownCapture: keyboardNavigationBehavior === 'arrow' ? onKeyDownCapture : undefined,
     onFocus,
     // 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
     'aria-label': node['aria-label'] || node.textValue || undefined,
@@ -367,6 +362,40 @@ export function useGridListItem<T>(
     id: getRowId(state, node.key)
   });
 
+  // TODO: guarding against selection when firing space/enter/click on a element in a row is technically not only limited to textfields so I
+  // am not making it specific to keyboardNavigationBehavior = tab, but maybe we should still?
+  // we need to guard against space/enter triggering selection/row link via usePress (from itemProps) so check if propagation
+  // is stopped. this also fixes space not working in a textfield in a tree parent row
+  let baseOnKeyDown = rowProps.onKeyDown;
+  rowProps.onKeyDown = (e: ReactKeyboardEvent<FocusableElement>) => {
+    onKeyDown(e as ReactKeyboardEvent);
+    if (!e.isPropagationStopped()) {
+      baseOnKeyDown?.(e);
+    }
+  };
+
+  // guard against presses triggering row selecition when they happen on elements within the row
+  // am currently assuming if it is tabbable it is interactive, but maybe can use a different kind of check
+  let baseOnPointerDown = rowProps.onPointerDown;
+  rowProps.onPointerDown = (e: ReactPointerEvent<FocusableElement>) => {
+    let target = getEventTarget(e) as Element | null;
+    if (target && target !== ref.current && isTabbable(target)) {
+      e.stopPropagation();
+      return;
+    }
+    baseOnPointerDown?.(e);
+  };
+
+  let baseOnMouseDown = rowProps.onMouseDown;
+  rowProps.onMouseDown = (e: ReactMouseEvent<FocusableElement>) => {
+    let target = getEventTarget(e) as Element | null;
+    if (target && target !== ref.current && isTabbable(target)) {
+      e.stopPropagation();
+      return;
+    }
+    baseOnMouseDown?.(e);
+  };
+
   if (isVirtualized) {
     let {collection} = state;
     let nodes = [...collection];
@@ -394,6 +423,50 @@ export function useGridListItem<T>(
   };
 }
 
+function handleTreeExpansionKeys<T>(
+  e: ReactKeyboardEvent,
+  state: ListState<T> | TreeState<T>,
+  node: RSNode<unknown>,
+  hasChildRows: boolean | undefined,
+  direction: string,
+  activeElement: Element | null,
+  rowRef: FocusableElement | null
+): boolean {
+  if (!('expandedKeys' in state) || activeElement !== rowRef) {
+    return false;
+  }
+  if (
+    e.key === EXPANSION_KEYS['expand'][direction] &&
+    state.selectionManager.focusedKey === node.key &&
+    hasChildRows &&
+    !state.expandedKeys.has(node.key)
+  ) {
+    state.toggleKey(node.key);
+    e.stopPropagation();
+    return true;
+  } else if (
+    e.key === EXPANSION_KEYS['collapse'][direction] &&
+    state.selectionManager.focusedKey === node.key
+  ) {
+    // If item is collapsible, collapse it; else move to parent
+    if (hasChildRows && state.expandedKeys.has(node.key)) {
+      state.toggleKey(node.key);
+      e.stopPropagation();
+      return true;
+    } else if (
+      !state.expandedKeys.has(node.key) &&
+      node.parentKey &&
+      state.collection.getItem(node.parentKey)?.type === 'item'
+    ) {
+      // Item is a leaf or already collapsed, move focus to parent
+      state.selectionManager.setFocusedKey(node.parentKey);
+      e.stopPropagation();
+      return true;
+    }
+  }
+  return false;
+}
+
 function last(walker: TreeWalker) {
   let next: FocusableElement | null = null;
   let last: FocusableElement | null = null;
diff --git a/packages/react-aria/src/interactions/createEventHandler.ts b/packages/react-aria/src/interactions/createEventHandler.ts
index 88831ab4d9f..18e04c3b7dc 100644
--- a/packages/react-aria/src/interactions/createEventHandler.ts
+++ b/packages/react-aria/src/interactions/createEventHandler.ts
@@ -45,6 +45,11 @@ export function createEventHandler<T extends SyntheticEvent>(
       },
       continuePropagation() {
         shouldStopPropagation = false;
+        // nested createEventHandler might have set continue propagation so we should continue
+        // propagation on wrappers
+        if (typeof (e as any).continuePropagation === 'function') {
+          (e as any).continuePropagation();
+        }
       },
       isPropagationStopped() {
         return shouldStopPropagation;
diff --git a/packages/react-aria/src/select/useSelect.ts b/packages/react-aria/src/select/useSelect.ts
index 6f434f1765b..68cdbf7a70d 100644
--- a/packages/react-aria/src/select/useSelect.ts
+++ b/packages/react-aria/src/select/useSelect.ts
@@ -187,8 +187,6 @@ export function useSelect<T, M extends SelectionMode = 'single'>(
     errorMessage: props.errorMessage || validationErrors
   });
 
-  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
-  delete typeSelectProps.onKeyDownCapture;
   if (state.selectionManager.selectionMode === 'multiple') {
     typeSelectProps = {};
   }
diff --git a/packages/react-aria/src/selection/useSelectableCollection.ts b/packages/react-aria/src/selection/useSelectableCollection.ts
index 98045e6c3e6..a8599907985 100644
--- a/packages/react-aria/src/selection/useSelectableCollection.ts
+++ b/packages/react-aria/src/selection/useSelectableCollection.ts
@@ -132,7 +132,7 @@ export interface AriaSelectableCollectionOptions {
    *
    * @private
    */
-  focusOnEntry?: 'first' | 'last';
+  UNSTABLE_focusOnEntry?: 'first' | 'last';
 }
 
 export interface SelectableCollectionAria {
@@ -162,7 +162,7 @@ export function useSelectableCollection(
     // If no scrollRef is provided, assume the collection ref is the scrollable region
     scrollRef = ref,
     linkBehavior = 'action',
-    focusOnEntry
+    UNSTABLE_focusOnEntry
   } = options;
   let {direction} = useLocale();
   let router = useRouter();
@@ -291,7 +291,7 @@ export function useSelectableCollection(
           if (manager.focusedKey === null && e.shiftKey) {
             return;
           }
-          // TODO: should Home and End also be reversed in column reverse aka Home goes to top? Or should Home always to to the "first" (bottom)
+
           e.preventDefault();
           let firstKey: Key | null = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(firstKey);
@@ -431,12 +431,14 @@ export function useSelectableCollection(
       }
     };
 
-    // we need the "virtual" modality case checks here because shift tabbing from the prompt field's asset card back into the
+    // we need the "virtual" modality case checks here because shift tabbing from the prompt field's attachment card back into the
     // thread is a virtual focus event (the tab handler in onKeyDown focuses the ref of the AttachementList aka TagGroup via a focus() call, hence the virtual modality)
-    if (focusOnEntry && (modality === 'keyboard' || modality === 'virtual')) {
+    if (UNSTABLE_focusOnEntry && (modality === 'keyboard' || modality === 'virtual')) {
       // always go to the first item in the Thread when tabbing forwards/backwards into the collection
       // since it is probably more important to the user to see the new prompt reply rather than go to the last focused key
-      navigateToKey(focusOnEntry === 'first' ? delegate.getFirstKey?.() : delegate.getLastKey?.());
+      navigateToKey(
+        UNSTABLE_focusOnEntry === 'first' ? delegate.getFirstKey?.() : delegate.getLastKey?.()
+      );
     } else if (manager.focusedKey == null) {
       // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
       // Attempt to detect whether the user is tabbing forward or backward into the collection
@@ -465,7 +467,7 @@ export function useSelectableCollection(
           focusWithoutScrolling(element);
         }
 
-        if (modality === 'keyboard' || modality === 'virtual') {
+        if (modality === 'keyboard' || (UNSTABLE_focusOnEntry && modality === 'virtual')) {
           scrollIntoViewport(element, {containingElement: ref.current});
         }
       }
diff --git a/packages/react-aria/src/selection/useTypeSelect.ts b/packages/react-aria/src/selection/useTypeSelect.ts
index eae1215dad4..ad7e00d4304 100644
--- a/packages/react-aria/src/selection/useTypeSelect.ts
+++ b/packages/react-aria/src/selection/useTypeSelect.ts
@@ -12,7 +12,7 @@
 
 import {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';
 import {getEventTarget, nodeContains} from '../utils/shadowdom/DOMFunctions';
-import {KeyboardEvent, useRef} from 'react';
+import {KeyboardEvent, useEffect, useRef} from 'react';
 import {MultipleSelectionManager} from 'react-stately/useMultipleSelectionState';
 
 /**
@@ -50,41 +50,75 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
   let state = useRef<{search: string; timeout: ReturnType<typeof setTimeout> | undefined}>({
     search: '',
     timeout: undefined
-  }).current;
+  });
+
+  let onKeyDownCapture = (e: KeyboardEvent) => {
+    // if we're in the middle of a search, then a spacebar should be treated as a search and we should not propagate the event
+    // since we handle this one in a capture phase, we should ignore it in the bubble phase
+    if (state.current.search.length > 0 && e.key === ' ') {
+      e.preventDefault();
+      if (
+        !('continuePropagation' in e) ||
+        ('continuePropagation' in e && !e.isPropagationStopped())
+      ) {
+        e.stopPropagation();
+      }
+      state.current.search += ' ';
+
+      if (keyboardDelegate.getKeyForSearch != null) {
+        // Use the delegate to find a key to focus.
+        // Prioritize items after the currently focused item, falling back to searching the whole list.
+        let key = keyboardDelegate.getKeyForSearch(
+          state.current.search,
+          selectionManager.focusedKey
+        );
+
+        // If no key found, search from the top.
+        if (key == null) {
+          key = keyboardDelegate.getKeyForSearch(state.current.search);
+        }
+
+        if (key != null) {
+          selectionManager.setFocusedKey(key);
+          if (onTypeSelect) {
+            onTypeSelect(key);
+          }
+        }
+      }
+
+      clearTimeout(state.current.timeout);
+      state.current.timeout = setTimeout(() => {
+        state.current.search = '';
+      }, TYPEAHEAD_DEBOUNCE_WAIT_MS);
+    }
+  };
 
   let onKeyDown = (e: KeyboardEvent) => {
+    if (e.altKey) {
+      return;
+    }
+
     let character = getStringForKey(e.key);
     if (
       !character ||
       e.ctrlKey ||
       e.metaKey ||
+      e.altKey ||
       !nodeContains(e.currentTarget, getEventTarget(e) as HTMLElement) ||
-      (state.search.length === 0 && character === ' ')
+      (state.current.search.length === 0 && character === ' ')
     ) {
       return;
     }
 
-    // Do not propagate the Spacebar event if it's meant to be part of the search.
-    // When we time out, the search term becomes empty, hence the check on length.
-    // Trimming is to account for the case of pressing the Spacebar more than once,
-    // which should cycle through the selection/deselection of the focused item.
-    if (character === ' ' && state.search.trim().length > 0) {
-      e.preventDefault();
-      if (!('continuePropagation' in e)) {
-        e.stopPropagation();
-      }
-    }
-
-    state.search += character;
+    state.current.search += character;
 
     if (keyboardDelegate.getKeyForSearch != null) {
       // Use the delegate to find a key to focus.
       // Prioritize items after the currently focused item, falling back to searching the whole list.
-      let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+      let key = keyboardDelegate.getKeyForSearch(state.current.search, selectionManager.focusedKey);
 
-      // If no key found, search from the top.
       if (key == null) {
-        key = keyboardDelegate.getKeyForSearch(state.search);
+        key = keyboardDelegate.getKeyForSearch(state.current.search);
       }
 
       if (key != null) {
@@ -92,20 +126,38 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
         if (onTypeSelect) {
           onTypeSelect(key);
         }
+        e.preventDefault();
+        if (!('continuePropagation' in e)) {
+          e.stopPropagation();
+        }
+      } else {
+        // if still nothing then the type to select is done and everything is reset
+        state.current.search = '';
+        clearTimeout(state.current.timeout);
+        state.current.timeout = undefined;
+        return;
       }
     }
 
-    clearTimeout(state.timeout);
-    state.timeout = setTimeout(() => {
-      state.search = '';
+    clearTimeout(state.current.timeout);
+    state.current.timeout = setTimeout(() => {
+      state.current.search = '';
     }, TYPEAHEAD_DEBOUNCE_WAIT_MS);
   };
 
+  useEffect(() => {
+    let timeout = state.current.timeout;
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [state]);
+
   return {
     typeSelectProps: {
       // Using a capturing listener to catch the keydown event before
       // other hooks in order to handle the Spacebar event.
-      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDownCapture : undefined,
+      onKeyDown: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
     }
   };
 }
diff --git a/packages/react-aria/src/toolbar/useToolbar.ts b/packages/react-aria/src/toolbar/useToolbar.ts
index 00b0b54b28c..bedd41b674a 100644
--- a/packages/react-aria/src/toolbar/useToolbar.ts
+++ b/packages/react-aria/src/toolbar/useToolbar.ts
@@ -89,7 +89,6 @@ export function useToolbar(
       // out of the entire toolbar. To do this, move focus
       // to the first or last focusable child, and let the
       // browser handle the Tab key as usual from there.
-      e.stopPropagation();
       lastFocused.current = getActiveElement() as HTMLElement;
       if (e.shiftKey) {
         focusManager.focusFirst();
diff --git a/packages/react-aria/src/tree/useTree.ts b/packages/react-aria/src/tree/useTree.ts
index 6a2f38793aa..dd98bd85c9e 100644
--- a/packages/react-aria/src/tree/useTree.ts
+++ b/packages/react-aria/src/tree/useTree.ts
@@ -21,10 +21,7 @@ import {TreeState} from 'react-stately/useTreeState';
 
 export interface TreeProps<T> extends GridListProps<T> {}
 
-export interface AriaTreeProps<T> extends Omit<
-  AriaGridListProps<T>,
-  'keyboardNavigationBehavior'
-> {}
+export interface AriaTreeProps<T> extends AriaGridListProps<T> {}
 export interface AriaTreeOptions<T> extends Omit<
   AriaGridListOptions<T>,
   'children' | 'shouldFocusWrap'
diff --git a/starters/docs/src/ComboBox.css b/starters/docs/src/ComboBox.css
index 12f8d59edef..6a9f4a33013 100644
--- a/starters/docs/src/ComboBox.css
+++ b/starters/docs/src/ComboBox.css
@@ -2,6 +2,8 @@
 @import './TextField.css';
 
 .react-aria-ComboBox {
+  display: flex;
+  flex-direction: column;
   color: var(--text-color);
   width: calc(var(--spacing) * 50);
 
diff --git a/starters/docs/src/ComboBox.tsx b/starters/docs/src/ComboBox.tsx
index e0ec8c027a6..80ef180ebb9 100644
--- a/starters/docs/src/ComboBox.tsx
+++ b/starters/docs/src/ComboBox.tsx
@@ -35,7 +35,7 @@ export function ComboBox<T, M extends 'single' | 'multiple' = 'single'>({
 }: ComboBoxProps<T, M>) {
   return (
     <AriaComboBox {...props}>
-      <Label>{label}</Label>
+      {label && <Label>{label}</Label>}
       <div className="combobox-field">
         <Input className="react-aria-Input inset" placeholder={placeholder} />
         <FieldButton>
diff --git a/starters/docs/src/TextField.tsx b/starters/docs/src/TextField.tsx
index 829ee83519f..2eda0e4c13a 100644
--- a/starters/docs/src/TextField.tsx
+++ b/starters/docs/src/TextField.tsx
@@ -2,17 +2,20 @@
 import {
   Input,
   TextField as AriaTextField,
+  TextArea as AriaTextArea,
   type TextFieldProps as AriaTextFieldProps,
   type ValidationResult
 } from 'react-aria-components/TextField';
 import {Label, FieldError, Description} from './Form';
 import './TextField.css';
+import type React from 'react';
 
-export interface TextFieldProps extends AriaTextFieldProps {
+export interface TextFieldProps<T = HTMLInputElement> extends AriaTextFieldProps {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
   placeholder?: string;
+  inputRef?: React.Ref<T>;
 }
 
 export function TextField({
@@ -20,12 +23,35 @@ export function TextField({
   description,
   errorMessage,
   placeholder,
+  inputRef,
   ...props
 }: TextFieldProps) {
   return (
     <AriaTextField {...props}>
       <Label>{label}</Label>
-      <Input className="react-aria-Input inset" placeholder={placeholder} />
+      <Input ref={inputRef} className="react-aria-Input inset" placeholder={placeholder} />
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </AriaTextField>
+  );
+}
+
+export function TextArea({
+  label,
+  description,
+  errorMessage,
+  placeholder,
+  inputRef,
+  ...props
+}: TextFieldProps<HTMLTextAreaElement>) {
+  return (
+    <AriaTextField {...props}>
+      <Label>{label}</Label>
+      <AriaTextArea
+        ref={inputRef}
+        className="react-aria-TextArea inset"
+        placeholder={placeholder}
+      />
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </AriaTextField>
diff --git a/starters/docs/src/Tree.tsx b/starters/docs/src/Tree.tsx
index 3928dfd5a4e..425e7ea2481 100644
--- a/starters/docs/src/Tree.tsx
+++ b/starters/docs/src/Tree.tsx
@@ -48,15 +48,21 @@ export function TreeItemContent(
 }
 
 export interface TreeItemProps extends Partial<AriaTreeItemProps> {
-  title: React.ReactNode;
+  title?: React.ReactNode;
 }
 
 export function TreeItem(props: TreeItemProps) {
   let textValue = typeof props.title === 'string' ? props.title : '';
   return (
     <AriaTreeItem textValue={textValue} {...props}>
-      <TreeItemContent>{props.title}</TreeItemContent>
-      {props.children}
+      {props.title != null ? (
+        <>
+          <TreeItemContent>{props.title}</TreeItemContent>
+          {props.children}
+        </>
+      ) : (
+        props.children
+      )}
     </AriaTreeItem>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 56aa899f231..842be08097d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8066,6 +8066,7 @@ __metadata:
     remark-stringify: "npm:^11.0.0"
     satori: "npm:^0.16.1"
     sharp: "npm:^0.33.5"
+    textarea-caret: "npm:^3.1.0"
     tree-sitter-highlight: "npm:^1.0.1"
     ts-morph: "npm:^26.0.0"
     unified: "npm:^11.0.5"
@@ -29647,6 +29648,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"textarea-caret@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "textarea-caret@npm:3.1.0"
+  checksum: 10c0/ae6a9d31eb337d0e5925642718484a56664cd94d88adeb7e68498a0149a0d3359bba8a21790f286f95843407ba9622dad10c092a429165587427270792071709
+  languageName: node
+  linkType: hard
+
 "thenify-all@npm:^1.0.0":
   version: 1.6.0
   resolution: "thenify-all@npm:1.6.0"