From 89a1c82d0cbadbdccb545e9b893b1b33a0f77e66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristoffer=20Nordstr=C3=B6m?= <totte.nordstrom@gmail.com>
Date: Wed, 20 Aug 2025 09:06:14 +0200
Subject: [PATCH] fix(combobox): remove keydown tab selecting item

fixes #8744
---
 .../@react-aria/combobox/src/useComboBox.ts   |  1 -
 .../combobox/test/ComboBox.test.js            | 35 +++++++++----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 6c7deae42ba..3b224dd1879 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -132,7 +132,6 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     }
     switch (e.key) {
       case 'Enter':
-      case 'Tab':
         // Prevent form submission if menu is open since we may be selecting a option
         if (state.isOpen && e.key === 'Enter') {
           e.preventDefault();
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 8a6b7ee6e54..c85327db224 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -1432,7 +1432,7 @@ describe('ComboBox', function () {
   });
 
   describe('blur', function () {
-    it('closes and commits selection on tab', async function () {
+    it('closes without selecting on tab', async function () {
       let {queryByRole, getAllByRole} = render(
         <Provider theme={theme}>
           <ComboBox label="Test" onOpenChange={onOpenChange} onInputChange={onInputChange} onSelectionChange={onSelectionChange}>
@@ -1470,9 +1470,8 @@ describe('ComboBox', function () {
 
       expect(document.activeElement).toBe(secondaryButton);
       expect(onOpenChange).toHaveBeenLastCalledWith(false, undefined);
-      expect(onSelectionChange).toHaveBeenCalledWith('1');
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      expect(onInputChange).toHaveBeenCalledWith('Bulbasaur');
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      expect(onInputChange).not.toHaveBeenCalled();
       expect(queryByRole('listbox')).toBeFalsy();
     });
 
@@ -1736,7 +1735,7 @@ describe('ComboBox', function () {
       expect(onBlur).not.toBeCalled();
     });
 
-    it('tab and shift tab move focus away from the combobox and select the focused item', async function () {
+    it('tab and shift tab move focus away from the combobox without selecting the focused item', async function () {
       let {getByRole, queryByRole, getAllByRole} = render(
         <Provider theme={theme}>
           <Button variant="secondary">Shift tab move</Button>
@@ -1795,9 +1794,9 @@ describe('ComboBox', function () {
       });
 
       expect(queryByRole('listbox')).toBeNull();
-      expect(onInputChange).toHaveBeenLastCalledWith('Bulbasaur');
-      expect(onSelectionChange).toHaveBeenLastCalledWith('1');
-      expect(combobox.value).toBe('Bulbasaur');
+      expect(onInputChange).not.toHaveBeenCalled();
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      expect(combobox.value).toBe('');
       expect(document.activeElement).toBe(tabButton);
 
       act(() => {
@@ -1828,9 +1827,9 @@ describe('ComboBox', function () {
         jest.runAllTimers();
       });
 
-      expect(onInputChange).toHaveBeenLastCalledWith('Bulbasaur');
-      expect(onSelectionChange).toHaveBeenLastCalledWith('1');
-      expect(combobox.value).toBe('Bulbasaur');
+      expect(onInputChange).toHaveBeenCalledWith('');
+      expect(onSelectionChange).not.toHaveBeenCalled();
+      expect(combobox.value).toBe('');
       expect(queryByRole('listbox')).toBeNull();
       expect(document.activeElement).toBe(shiftTabButton);
     });
@@ -5268,9 +5267,9 @@ describe('ComboBox', function () {
 
       if (parseInt(React.version, 10) >= 19) {
         it('resets to defaultSelectedKey when submitting form action', async () => {
-          function Test() {        
+          function Test() {
             const [value, formAction] = React.useActionState(() => '2', '1');
-            
+
             return (
               <Provider theme={theme}>
                 <form action={formAction}>
@@ -5280,11 +5279,11 @@ describe('ComboBox', function () {
               </Provider>
             );
           }
-    
+
           let {getByTestId, getByRole} = render(<Test />);
           let input = getByRole('combobox');
           expect(input).toHaveValue('One');
-    
+
           let button = getByTestId('submit');
           await act(async () => await user.click(button));
           expect(input).toHaveValue('Two');
@@ -5599,7 +5598,7 @@ describe('ComboBox', function () {
         it('resets to defaultSelectedKey when submitting form action', async () => {
           function Test() {
             const [value, formAction] = React.useActionState(() => '2', '1');
-            
+
             return (
               <Provider theme={theme}>
                 <form action={formAction}>
@@ -5609,11 +5608,11 @@ describe('ComboBox', function () {
               </Provider>
             );
           }
-    
+
           let {getByTestId} = render(<Test />);
           let input = document.querySelector('input[name=combobox]');
           expect(input).toHaveValue('One');
-    
+
           let button = getByTestId('submit');
           await act(async () => await user.click(button));
           expect(input).toHaveValue('Two');