[combobox][autocomplete] Keep focus on input when pressing list element

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

@@ -642,7 +642,7 @@ describe('<Autocomplete.Root />', () => {
       expect(submitCount).to.equal(1);
     });
 
-    it('when true, pressing Enter when focus is on List submits the owning form when an item is highlighted', async () => {
+    it('focusing the listbox should keep the input focused and maintain functionality', async () => {
       let submitValue: string | null = null;
       let submitCount = 0;
 
@@ -680,16 +680,16 @@ describe('<Autocomplete.Root />', () => {
       await user.type(input, 'al');
       await user.keyboard('{ArrowDown}');
 
-      const listbox = screen.getByTestId('listbox');
+      const listbox = screen.getByRole('listbox');
       const alphaOption = screen.getByRole('option', { name: 'alpha' });
       await waitFor(() => {
         expect(alphaOption).to.have.attribute('data-highlighted');
       });
 
-      act(() => {
+      await act(() => {
         listbox.focus();
       });
-      expect(listbox).toHaveFocus();
+      expect(input).toHaveFocus();
 
       await user.keyboard('{Enter}');
 

packages/react/src/combobox/popup/ComboboxPopup.tsx

@@ -47,7 +47,6 @@ export const ComboboxPopup = React.forwardRef(function ComboboxPopup(
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const inputElement = useStore(store, selectors.inputElement);
-  const listElement = useStore(store, selectors.listElement);
 
   const empty = filteredItems.length === 0;
 
@@ -81,7 +80,10 @@ export const ComboboxPopup = React.forwardRef(function ComboboxPopup(
         tabIndex: -1,
         onFocus(event) {
           const target = getTarget(event.nativeEvent) as Element | null;
-          if (openMethod !== 'touch' && !contains(listElement, target)) {
+          if (
+            openMethod !== 'touch' &&
+            (contains(store.state.listElement, target) || target === event.currentTarget)
+          ) {
             store.state.inputRef.current?.focus();
           }
         },

packages/react/src/combobox/root/ComboboxRoot.test.tsx

@@ -605,16 +605,16 @@ describe('<Combobox.Root />', () => {
       });
     });
 
-    it('Enter selects when focus is on Listbox', async () => {
+    it('clicking on "listbox" keeps the focus on the input', async () => {
       const items = ['apple', 'banana', 'cherry'];
 
       const { user } = await render(
         <Combobox.Root items={items}>
-          <Combobox.Input data-testid="input" />
+          <Combobox.Input />
           <Combobox.Portal>
             <Combobox.Positioner>
               <Combobox.Popup>
-                <Combobox.List data-testid="listbox">
+                <Combobox.List>
                   {(item: string) => (
                     <Combobox.Item key={item} value={item}>
                       {item}
@@ -627,16 +627,16 @@ describe('<Combobox.Root />', () => {
         </Combobox.Root>,
       );
 
-      const input = screen.getByTestId('input');
+      const input = screen.getByRole('combobox');
 
       await user.click(input);
       await waitFor(() => {
         expect(screen.getByRole('listbox')).not.to.equal(null);
       });
 
-      const listbox = screen.getByTestId('listbox');
+      const listbox = screen.getByRole('listbox');
       await user.click(listbox);
-      expect(listbox).toHaveFocus();
+      expect(input).toHaveFocus();
 
       await user.keyboard('{ArrowDown}');
       await user.keyboard('{Enter}');