Ensure pressing Tab in the ComboboxInput, correctly syncs the input value (#3785)

We prevent syncing the `ComboboxInput` value while you are typing.
However, when you press `Tab` there is keyboard event causing the
component to be marked as if you are currently typing. But since we are
tabbing away from the input we should not be "typing" anymore.

This ensures that the `input` can be updated with whatever the current
value should be.

Fixes: #3738
Fixes: #3595
Fixes: #3537
Closes: #3596

---------

Co-authored-by: Daniil Savitskii <[email protected]>

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `onChange` types are contravariant instead of bivariant ([#3781](https://github.com/tailwindlabs/headlessui/pull/3781))
 - Support `<summary>` as a focusable element inside `<details>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
 - Fix `Maximum update depth exceeded` crash when using `transition` prop ([#3782](https://github.com/tailwindlabs/headlessui/pull/3782))
+- Ensure pressing `Tab` in the `ComboboxInput`, correctly syncs the input value ([#3785](https://github.com/tailwindlabs/headlessui/pull/3785))
 
 ## [2.2.7] - 2025-07-30
 

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -3035,6 +3035,56 @@ describe.each([{ virtual: true }, { virtual: false }])(
             assertActiveElement(document.querySelector('#before-combobox'))
           })
         )
+
+        it(
+          'pressing Tab should sync the ComboboxInput value again',
+          suppressConsoleLogs(async () => {
+            function Example() {
+              let [value, setValue] = useState<string | null>(null)
+
+              return (
+                <>
+                  <MyCombobox
+                    comboboxProps={{ value, onChange: setValue }}
+                    inputProps={{
+                      displayValue: (value: string | null) => value ?? '<cleared>',
+                    }}
+                  />
+                  <button id="clear" onClick={() => setValue(null)}>
+                    Clear selection
+                  </button>
+                </>
+              )
+            }
+
+            render(<Example />)
+
+            assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+            assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+            // Open combobox
+            await click(getComboboxButton())
+
+            // Select the 2nd option
+            await press(Keys.ArrowDown)
+
+            // Tab to the next DOM node
+            await press(Keys.Tab)
+
+            // Verify it is closed
+            assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+            assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+            // Verify the selected value was the highlighted one
+            expect(getComboboxInput()?.value).toBe('Option B')
+
+            // Clear the option
+            await click(document.querySelector('button#clear') as HTMLButtonElement)
+
+            // Verify the input value is cleared
+            expect(getComboboxInput()?.value).toBe('<cleared>')
+          })
+        )
       })
 
       describe('`Escape` key', () => {

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -785,6 +785,7 @@ function InputFn<
         return machine.actions.closeCombobox()
 
       case Keys.Tab:
+        machine.actions.setIsTyping(false)
         if (machine.state.comboboxState !== ComboboxState.Open) return
         if (
           data.mode === ValueMode.Single &&