diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index ce8a3bfc6..57d566f76 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `role="alertdialog"` to `<Dialog>` component ([#2709](https://github.com/tailwindlabs/headlessui/pull/2709))
 - Ensure blurring the `Combobox.Input` component closes the `Combobox` ([#2712](https://github.com/tailwindlabs/headlessui/pull/2712))
 
+### Added
+
+- Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
+
 ## [1.7.17] - 2023-08-17
 
 ### Fixed
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
index bac14cf8c..30b638bab 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
@@ -4698,6 +4698,176 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to open the combobox by focusing the input with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+      assertComboboxList({
+        state: ComboboxState.Visible,
+        attributes: { id: 'headlessui-combobox-options-3' },
+      })
+      assertActiveElement(getComboboxInput())
+      assertComboboxButtonLinkedWithCombobox()
+
+      // Verify we have combobox options
+      let options = getComboboxOptions()
+      expect(options).toHaveLength(3)
+      options.forEach((option) => assertComboboxOption(option))
+    })
+  )
+
+  it(
+    'should not be possible to open the combobox by focusing the input with immediate mode disabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test">
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is invisible
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+    })
+  )
+
+  it(
+    'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test" disabled immediate>
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is invisible
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+    })
+  )
+
+  it(
+    'should be possible to close a combobox on click with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+
+      // Open combobox
+      await click(getComboboxButton())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+
+      // Click to close
+      await click(getComboboxButton())
+
+      // Verify it is closed
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+      assertActiveElement(getComboboxInput())
+    })
+  )
+
+  it(
+    'should be possible to close a focused combobox on click with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+
+      // Open combobox by focusing input
+      await focus(getComboboxInput())
+      assertActiveElement(getComboboxInput())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+
+      // Click to close
+      await click(getComboboxButton())
+
+      // Verify it is closed
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+      assertActiveElement(getComboboxInput())
+    })
+  )
+
   it(
     'should be possible to open the combobox on click',
     suppressConsoleLogs(async () => {
@@ -5358,6 +5528,35 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      render(
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
+          <Combobox.Button>Trigger</Combobox.Button>
+          <Combobox.Options>
+            <Combobox.Option value="a">Option A</Combobox.Option>
+            <Combobox.Option value="b">Option B</Combobox.Option>
+            <Combobox.Option value="c">Option C</Combobox.Option>
+          </Combobox.Options>
+        </Combobox>
+      )
+
+      // Open combobox by focusing input
+      await focus(getComboboxInput())
+      assertActiveElement(getComboboxInput())
+
+      assertComboboxList({ state: ComboboxState.Visible })
+
+      let options = getComboboxOptions()
+
+      // We should be able to click the first option
+      await click(options[1])
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+    })
+  )
+
   it(
     'should be possible to click a disabled combobox option, which is a no-op',
     suppressConsoleLogs(async () => {
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index ed6fec8bf..88f5b1c91 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -29,6 +29,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
+import { history } from '../../utils/active-element-history'
 
 import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
@@ -68,6 +69,7 @@ enum ValueMode {
 
 enum ActivationTrigger {
   Pointer,
+  Focus,
   Other,
 }
 
@@ -99,6 +101,8 @@ enum ActionTypes {
   UnregisterOption,
 
   RegisterLabel,
+
+  SetActivationTrigger,
 }
 
 function adjustOrderedState<T>(
@@ -142,6 +146,7 @@ type Actions<T> =
   | { type: ActionTypes.RegisterOption; id: string; dataRef: ComboboxOptionDataRef<T> }
   | { type: ActionTypes.RegisterLabel; id: string | null }
   | { type: ActionTypes.UnregisterOption; id: string }
+  | { type: ActionTypes.SetActivationTrigger; trigger: ActivationTrigger }
 
 let reducers: {
   [P in ActionTypes]: <T>(
@@ -253,6 +258,12 @@ let reducers: {
       labelId: action.id,
     }
   },
+  [ActionTypes.SetActivationTrigger]: (state, action) => {
+    return {
+      ...state,
+      activationTrigger: action.trigger,
+    }
+  },
 }
 
 let ComboboxActionsContext = createContext<{
@@ -264,6 +275,7 @@ let ComboboxActionsContext = createContext<{
   goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger): void
   selectOption(id: string): void
   selectActiveOption(): void
+  setActivationTrigger(trigger: ActivationTrigger): void
   onChange(value: unknown): void
 } | null>(null)
 ComboboxActionsContext.displayName = 'ComboboxActionsContext'
@@ -287,6 +299,7 @@ let ComboboxDataContext = createContext<
       mode: ValueMode
       activeOptionIndex: number | null
       nullable: boolean
+      immediate: boolean
       compare(a: unknown, z: unknown): boolean
       isSelected(value: unknown): boolean
       __demoMode: boolean
@@ -384,6 +397,7 @@ export type ComboboxProps<
   __demoMode?: boolean
   form?: string
   name?: string
+  immediate?: boolean
 }
 
 function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
@@ -418,6 +432,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     __demoMode = false,
     nullable = false,
     multiple = false,
+    immediate = false,
     ...theirProps
   } = props
   let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(
@@ -468,6 +483,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
   let data = useMemo<_Data>(
     () => ({
       ...state,
+      immediate,
       optionsPropsRef,
       labelRef,
       inputRef,
@@ -621,6 +637,10 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     })
   })
 
+  let setActivationTrigger = useEvent((trigger: ActivationTrigger) => {
+    dispatch({ type: ActionTypes.SetActivationTrigger, trigger })
+  })
+
   let actions = useMemo<_Actions>(
     () => ({
       onChange,
@@ -629,6 +649,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
       goToOption,
       closeCombobox,
       openCombobox,
+      setActivationTrigger,
       selectActiveOption,
       selectOption,
     }),
@@ -990,7 +1011,9 @@ function InputFn<
       case Keys.Tab:
         isTyping.current = false
         if (data.comboboxState !== ComboboxState.Open) return
-        if (data.mode === ValueMode.Single) actions.selectActiveOption()
+        if (data.mode === ValueMode.Single && data.activationTrigger !== ActivationTrigger.Focus) {
+          actions.selectActiveOption()
+        }
         actions.closeCombobox()
         break
     }
@@ -1021,14 +1044,16 @@ function InputFn<
   })
 
   let handleBlur = useEvent((event: ReactFocusEvent) => {
+    let relatedTarget =
+      (event.relatedTarget as HTMLElement) ?? history.find((x) => x !== event.currentTarget)
     isTyping.current = false
 
     // Focus is moved into the list, we don't want to close yet.
-    if (data.optionsRef.current?.contains(event.relatedTarget)) {
+    if (data.optionsRef.current?.contains(relatedTarget)) {
       return
     }
 
-    if (data.buttonRef.current?.contains(event.relatedTarget)) {
+    if (data.buttonRef.current?.contains(relatedTarget)) {
       return
     }
 
@@ -1045,8 +1070,9 @@ function InputFn<
         clear()
       }
 
-      // We do have a value, so let's select the active option
-      else {
+      // We do have a value, so let's select the active option, unless we were just going through
+      // the form and we opened it due to the focus event.
+      else if (data.activationTrigger !== ActivationTrigger.Focus) {
         actions.selectActiveOption()
       }
     }
@@ -1054,6 +1080,26 @@ function InputFn<
     return actions.closeCombobox()
   })
 
+  let handleFocus = useEvent((event: ReactFocusEvent) => {
+    let relatedTarget =
+      (event.relatedTarget as HTMLElement) ?? history.find((x) => x !== event.currentTarget)
+    if (data.buttonRef.current?.contains(relatedTarget)) return
+    if (data.optionsRef.current?.contains(relatedTarget)) return
+    if (data.disabled) return
+
+    if (!data.immediate) return
+    if (data.comboboxState === ComboboxState.Open) return
+
+    actions.openCombobox()
+
+    // We need to make sure that tabbing through a form doesn't result in incorrectly setting the
+    // value of the combobox. We will set the activation trigger to `Focus`, and we will ignore
+    // selecting the active option when the user tabs away.
+    d.nextFrame(() => {
+      actions.setActivationTrigger(ActivationTrigger.Focus)
+    })
+  })
+
   // TODO: Verify this. The spec says that, for the input/combobox, the label is the labelling element when present
   // Otherwise it's the ID of the non-label element
   let labelledby = useComputed(() => {
@@ -1088,6 +1134,7 @@ function InputFn<
     onCompositionEnd: handleCompositionEnd,
     onKeyDown: handleKeyDown,
     onChange: handleChange,
+    onFocus: handleFocus,
     onBlur: handleBlur,
   }
 
@@ -1172,7 +1219,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let handleClick = useEvent((event: ReactMouseEvent) => {
+  let handleClick = useEvent((event: ReactMouseEvent<HTMLButtonElement>) => {
     if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
     if (data.comboboxState === ComboboxState.Open) {
       actions.closeCombobox()
@@ -1429,9 +1476,6 @@ function OptionFn<
   let handleClick = useEvent((event: { preventDefault: Function }) => {
     if (disabled) return event.preventDefault()
     select()
-    if (data.mode === ValueMode.Single) {
-      actions.closeCombobox()
-    }
 
     // We want to make sure that we don't accidentally trigger the virtual keyboard.
     //
@@ -1446,7 +1490,11 @@ function OptionFn<
     // But right now this is still an experimental feature:
     // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/virtualKeyboard
     if (!isMobile()) {
-      requestAnimationFrame(() => data.inputRef.current?.focus())
+      requestAnimationFrame(() => data.inputRef.current?.focus({ preventScroll: true }))
+    }
+
+    if (data.mode === ValueMode.Single) {
+      requestAnimationFrame(() => actions.closeCombobox())
     }
   })
 
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
index 88a2362fd..7e0ad8edf 100644
--- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
+++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
@@ -23,8 +23,8 @@ import { useEventListener } from '../../hooks/use-event-listener'
 import { microTask } from '../../utils/micro-task'
 import { useWatch } from '../../hooks/use-watch'
 import { useDisposables } from '../../hooks/use-disposables'
-import { onDocumentReady } from '../../utils/document-ready'
 import { useOnUnmount } from '../../hooks/use-on-unmount'
+import { history } from '../../utils/active-element-history'
 
 type Containers =
   // Lazy resolved containers
@@ -212,29 +212,6 @@ export let FocusTrap = Object.assign(FocusTrapRoot, {
 
 // ---
 
-let history: HTMLElement[] = []
-onDocumentReady(() => {
-  function handle(e: Event) {
-    if (!(e.target instanceof HTMLElement)) return
-    if (e.target === document.body) return
-    if (history[0] === e.target) return
-
-    history.unshift(e.target)
-
-    // Filter out DOM Nodes that don't exist anymore
-    history = history.filter((x) => x != null && x.isConnected)
-    history.splice(10) // Only keep the 10 most recent items
-  }
-
-  window.addEventListener('click', handle, { capture: true })
-  window.addEventListener('mousedown', handle, { capture: true })
-  window.addEventListener('focus', handle, { capture: true })
-
-  document.body.addEventListener('click', handle, { capture: true })
-  document.body.addEventListener('mousedown', handle, { capture: true })
-  document.body.addEventListener('focus', handle, { capture: true })
-})
-
 function useRestoreElement(enabled: boolean = true) {
   let localHistory = useRef<HTMLElement[]>(history.slice())
 
diff --git a/packages/@headlessui-react/src/utils/active-element-history.ts b/packages/@headlessui-react/src/utils/active-element-history.ts
new file mode 100644
index 000000000..d75dbb399
--- /dev/null
+++ b/packages/@headlessui-react/src/utils/active-element-history.ts
@@ -0,0 +1,24 @@
+import { onDocumentReady } from './document-ready'
+
+export let history: HTMLElement[] = []
+onDocumentReady(() => {
+  function handle(e: Event) {
+    if (!(e.target instanceof HTMLElement)) return
+    if (e.target === document.body) return
+    if (history[0] === e.target) return
+
+    history.unshift(e.target)
+
+    // Filter out DOM Nodes that don't exist anymore
+    history = history.filter((x) => x != null && x.isConnected)
+    history.splice(10) // Only keep the 10 most recent items
+  }
+
+  window.addEventListener('click', handle, { capture: true })
+  window.addEventListener('mousedown', handle, { capture: true })
+  window.addEventListener('focus', handle, { capture: true })
+
+  document.body.addEventListener('click', handle, { capture: true })
+  document.body.addEventListener('mousedown', handle, { capture: true })
+  document.body.addEventListener('focus', handle, { capture: true })
+})
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 41e97e1b6..adae643cb 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `<button>` to be in nested components in `<PopoverButton>` ([#2715](https://github.com/tailwindlabs/headlessui/pull/2715))
 - Don't overwrite user-defined template refs when rendering ([#2720](https://github.com/tailwindlabs/headlessui/pull/2720))
 
+### Added
+
+- Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
+
 ## [1.7.16] - 2023-08-17
 
 ### Fixed
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
index e5f24832f..6f6764c20 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -5003,6 +5003,194 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to open the combobox by focusing the input with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" as="div" immediate>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="a">Option A</ComboboxOption>
+              <ComboboxOption value="b">Option B</ComboboxOption>
+              <ComboboxOption value="c">Option C</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref('test') }),
+      })
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+      assertComboboxList({
+        state: ComboboxState.Visible,
+        attributes: { id: 'headlessui-combobox-options-3' },
+      })
+      assertActiveElement(getComboboxInput())
+      assertComboboxButtonLinkedWithCombobox()
+
+      // Verify we have combobox options
+      let options = getComboboxOptions()
+      expect(options).toHaveLength(3)
+      options.forEach((option) => assertComboboxOption(option))
+
+      // Verify that the first combobox option is active
+      assertActiveComboboxOption(options[0])
+    })
+  )
+
+  it(
+    'should not be possible to open the combobox by focusing the input with immediate mode disabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" as="div">
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="a">Option A</ComboboxOption>
+              <ComboboxOption value="b">Option B</ComboboxOption>
+              <ComboboxOption value="c">Option C</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref('test') }),
+      })
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is invisible
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-options-3' },
+      })
+    })
+  )
+
+  it(
+    'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" as="div" disabled immediate>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="a">Option A</ComboboxOption>
+              <ComboboxOption value="b">Option B</ComboboxOption>
+              <ComboboxOption value="c">Option C</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref('test') }),
+      })
+
+      assertComboboxButton({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-button-2' },
+      })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+      // Focus the input
+      await focus(getComboboxInput())
+
+      // Verify it is invisible
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({
+        state: ComboboxState.InvisibleUnmounted,
+        attributes: { id: 'headlessui-combobox-options-3' },
+      })
+    })
+  )
+
+  it(
+    'should be possible to close a combobox on click with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="a">Option A</ComboboxOption>
+              <ComboboxOption value="b">Option B</ComboboxOption>
+              <ComboboxOption value="c">Option C</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref(null) }),
+      })
+
+      // Open combobox
+      await click(getComboboxButton())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+
+      // Click to close
+      await click(getComboboxButton())
+
+      // Verify it is closed
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+      assertActiveElement(getComboboxInput())
+    })
+  )
+
+  it(
+    'should be possible to close a focused combobox on click with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="a">Option A</ComboboxOption>
+              <ComboboxOption value="b">Option B</ComboboxOption>
+              <ComboboxOption value="c">Option C</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref(null) }),
+      })
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+
+      // Open combobox by focusing input
+      await focus(getComboboxInput())
+      assertActiveElement(getComboboxInput())
+
+      // Verify it is visible
+      assertComboboxButton({ state: ComboboxState.Visible })
+
+      // Click to close
+      await click(getComboboxButton())
+
+      // Verify it is closed
+      assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+      assertActiveElement(getComboboxInput())
+    })
+  )
+
   it(
     'should be possible to open the combobox on click',
     suppressConsoleLogs(async () => {
@@ -5702,6 +5890,38 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="alice">alice</ComboboxOption>
+              <ComboboxOption value="bob">bob</ComboboxOption>
+              <ComboboxOption value="charlie">charlie</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+        `,
+        setup: () => ({ value: ref(null) }),
+      })
+
+      // Open combobox by focusing input
+      await focus(getComboboxInput())
+      assertActiveElement(getComboboxInput())
+
+      assertComboboxList({ state: ComboboxState.Visible })
+
+      let options = getComboboxOptions()
+
+      // We should be able to click the first option
+      await click(options[1])
+      assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+    })
+  )
+
   it(
     'should be possible to click a disabled combobox option, which is a no-op',
     suppressConsoleLogs(async () => {
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
index 06fd7fc44..2fa7850af 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -39,6 +39,7 @@ import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
 import { isMobile } from '../../utils/platform'
 import { disposables } from '../../utils/disposables'
 import { getOwnerDocument } from '../../utils/owner'
+import { history } from '../../utils/active-element-history'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z
@@ -56,6 +57,7 @@ enum ValueMode {
 
 enum ActivationTrigger {
   Pointer,
+  Focus,
   Other,
 }
 
@@ -72,6 +74,7 @@ type StateDefinition = {
 
   mode: ComputedRef<ValueMode>
   nullable: ComputedRef<boolean>
+  immediate: ComputedRef<boolean>
 
   compare: (a: unknown, z: unknown) => boolean
 
@@ -90,6 +93,7 @@ type StateDefinition = {
   // State mutators
   closeCombobox(): void
   openCombobox(): void
+  setActivationTrigger(trigger: ActivationTrigger): void
   goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger): void
   change(value: unknown): void
   selectOption(id: string): void
@@ -138,6 +142,7 @@ export let Combobox = defineComponent({
     name: { type: String, optional: true },
     nullable: { type: Boolean, default: false },
     multiple: { type: [Boolean], default: false },
+    immediate: { type: [Boolean], default: false },
   },
   inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
@@ -221,6 +226,7 @@ export let Combobox = defineComponent({
       },
       defaultValue: computed(() => props.defaultValue),
       nullable,
+      immediate: computed(() => props.immediate),
       inputRef,
       labelRef,
       buttonRef,
@@ -280,6 +286,9 @@ export let Combobox = defineComponent({
 
         comboboxState.value = ComboboxStates.Open
       },
+      setActivationTrigger(trigger: ActivationTrigger) {
+        activationTrigger.value = trigger
+      },
       goToOption(focus: Focus, id?: string, trigger?: ActivationTrigger) {
         defaultToFirstOption.value = false
 
@@ -531,6 +540,7 @@ export let Combobox = defineComponent({
               'defaultValue',
               'nullable',
               'multiple',
+              'immediate',
               'onUpdate:modelValue',
               'by',
             ]),
@@ -951,7 +961,12 @@ export let ComboboxInput = defineComponent({
         case Keys.Tab:
           isTyping.value = false
           if (api.comboboxState.value !== ComboboxStates.Open) return
-          if (api.mode.value === ValueMode.Single) api.selectActiveOption()
+          if (
+            api.mode.value === ValueMode.Single &&
+            api.activationTrigger.value !== ActivationTrigger.Focus
+          ) {
+            api.selectActiveOption()
+          }
           api.closeCombobox()
           break
       }
@@ -982,20 +997,16 @@ export let ComboboxInput = defineComponent({
     }
 
     function handleBlur(event: FocusEvent) {
+      let relatedTarget =
+        (event.relatedTarget as HTMLElement) ?? history.find((x) => x !== event.currentTarget)
       isTyping.value = false
 
       // Focus is moved into the list, we don't want to close yet.
-      if (
-        event.relatedTarget instanceof Node &&
-        dom(api.optionsRef)?.contains(event.relatedTarget)
-      ) {
+      if (dom(api.optionsRef)?.contains(relatedTarget)) {
         return
       }
 
-      if (
-        event.relatedTarget instanceof Node &&
-        dom(api.buttonRef)?.contains(event.relatedTarget)
-      ) {
+      if (dom(api.buttonRef)?.contains(relatedTarget)) {
         return
       }
 
@@ -1012,8 +1023,9 @@ export let ComboboxInput = defineComponent({
           clear()
         }
 
-        // We do have a value, so let's select the active option
-        else {
+        // We do have a value, so let's select the active option, unless we were just going through
+        // the form and we opened it due to the focus event.
+        else if (api.activationTrigger.value !== ActivationTrigger.Focus) {
           api.selectActiveOption()
         }
       }
@@ -1021,6 +1033,27 @@ export let ComboboxInput = defineComponent({
       return api.closeCombobox()
     }
 
+    function handleFocus(event: FocusEvent) {
+      let relatedTarget =
+        (event.relatedTarget as HTMLElement) ?? history.find((x) => x !== event.currentTarget)
+
+      if (dom(api.buttonRef)?.contains(relatedTarget)) return
+      if (dom(api.optionsRef)?.contains(relatedTarget)) return
+      if (api.disabled.value) return
+
+      if (!api.immediate.value) return
+      if (api.comboboxState.value === ComboboxStates.Open) return
+
+      api.openCombobox()
+
+      // We need to make sure that tabbing through a form doesn't result in incorrectly setting the
+      // value of the combobox. We will set the activation trigger to `Focus`, and we will ignore
+      // selecting the active option when the user tabs away.
+      disposables().nextFrame(() => {
+        api.setActivationTrigger(ActivationTrigger.Focus)
+      })
+    }
+
     let defaultValue = computed(() => {
       return (
         props.defaultValue ??
@@ -1049,6 +1082,7 @@ export let ComboboxInput = defineComponent({
         onCompositionend: handleCompositionend,
         onKeydown: handleKeyDown,
         onInput: handleInput,
+        onFocus: handleFocus,
         onBlur: handleBlur,
         role: 'combobox',
         type: attrs.type ?? 'text',
@@ -1195,9 +1229,6 @@ export let ComboboxOption = defineComponent({
     function handleClick(event: MouseEvent) {
       if (props.disabled) return event.preventDefault()
       api.selectOption(id)
-      if (api.mode.value === ValueMode.Single) {
-        api.closeCombobox()
-      }
 
       // We want to make sure that we don't accidentally trigger the virtual keyboard.
       //
@@ -1212,7 +1243,11 @@ export let ComboboxOption = defineComponent({
       // But right now this is still an experimental feature:
       // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/virtualKeyboard
       if (!isMobile()) {
-        requestAnimationFrame(() => dom(api.inputRef)?.focus())
+        requestAnimationFrame(() => dom(api.inputRef)?.focus({ preventScroll: true }))
+      }
+
+      if (api.mode.value === ValueMode.Single) {
+        requestAnimationFrame(() => api.closeCombobox())
       }
     }
 
diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
index bdeca3037..677f60531 100644
--- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
+++ b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
@@ -22,7 +22,7 @@ import { useTabDirection, Direction as TabDirection } from '../../hooks/use-tab-
 import { getOwnerDocument } from '../../utils/owner'
 import { useEventListener } from '../../hooks/use-event-listener'
 import { microTask } from '../../utils/micro-task'
-import { onDocumentReady } from '../../utils/document-ready'
+import { history } from '../../utils/active-element-history'
 
 type Containers =
   // Lazy resolved containers
@@ -209,29 +209,6 @@ export let FocusTrap = Object.assign(
   { features: Features }
 )
 
-let history: HTMLElement[] = []
-onDocumentReady(() => {
-  function handle(e: Event) {
-    if (!(e.target instanceof HTMLElement)) return
-    if (e.target === document.body) return
-    if (history[0] === e.target) return
-
-    history.unshift(e.target)
-
-    // Filter out DOM Nodes that don't exist anymore
-    history = history.filter((x) => x != null && x.isConnected)
-    history.splice(10) // Only keep the 10 most recent items
-  }
-
-  window.addEventListener('click', handle, { capture: true })
-  window.addEventListener('mousedown', handle, { capture: true })
-  window.addEventListener('focus', handle, { capture: true })
-
-  document.body.addEventListener('click', handle, { capture: true })
-  document.body.addEventListener('mousedown', handle, { capture: true })
-  document.body.addEventListener('focus', handle, { capture: true })
-})
-
 function useRestoreElement(enabled: Ref<boolean>) {
   let localHistory = ref<HTMLElement[]>(history.slice())
 
diff --git a/packages/@headlessui-vue/src/utils/active-element-history.ts b/packages/@headlessui-vue/src/utils/active-element-history.ts
new file mode 100644
index 000000000..d75dbb399
--- /dev/null
+++ b/packages/@headlessui-vue/src/utils/active-element-history.ts
@@ -0,0 +1,24 @@
+import { onDocumentReady } from './document-ready'
+
+export let history: HTMLElement[] = []
+onDocumentReady(() => {
+  function handle(e: Event) {
+    if (!(e.target instanceof HTMLElement)) return
+    if (e.target === document.body) return
+    if (history[0] === e.target) return
+
+    history.unshift(e.target)
+
+    // Filter out DOM Nodes that don't exist anymore
+    history = history.filter((x) => x != null && x.isConnected)
+    history.splice(10) // Only keep the 10 most recent items
+  }
+
+  window.addEventListener('click', handle, { capture: true })
+  window.addEventListener('mousedown', handle, { capture: true })
+  window.addEventListener('focus', handle, { capture: true })
+
+  document.body.addEventListener('click', handle, { capture: true })
+  document.body.addEventListener('mousedown', handle, { capture: true })
+  document.body.addEventListener('focus', handle, { capture: true })
+})
diff --git a/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx b/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx
new file mode 100644
index 000000000..a80e01134
--- /dev/null
+++ b/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react'
+import { Combobox } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+import { Button } from '../../components/button'
+
+let everybody = [
+  'Wade Cooper',
+  'Arlene Mccoy',
+  'Devon Webb',
+  'Tom Cook',
+  'Tanya Fox',
+  'Hellen Schmidt',
+  'Caroline Schultz',
+  'Mason Heaney',
+  'Claudie Smitham',
+  'Emil Schaefer',
+]
+
+function useDebounce<T>(value: T, delay: number) {
+  let [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(() => {
+    let timer = setTimeout(() => setDebouncedValue(value), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay])
+  return debouncedValue
+}
+export default function Home() {
+  let [query, setQuery] = useState('')
+  let [activePerson, setActivePerson] = useState(everybody[2])
+
+  // Mimic delayed response from an API
+  let actualQuery = useDebounce(query, 0 /* Change to higher value like 100 for testing purposes */)
+
+  // Choose a random person on mount
+  useEffect(() => {
+    setActivePerson(everybody[Math.floor(Math.random() * everybody.length)])
+  }, [])
+
+  let people =
+    actualQuery === ''
+      ? everybody
+      : everybody.filter((person) => person.toLowerCase().includes(actualQuery.toLowerCase()))
+
+  return (
+    <div className="flex h-full w-screen justify-center bg-gray-50 p-12">
+      <div className="mx-auto w-full max-w-xs">
+        <div className="py-8 font-mono text-xs">Selected person: {activePerson}</div>
+        <div className="space-y-1">
+          <Combobox
+            value={activePerson}
+            onChange={(value) => {
+              setActivePerson(value)
+              setQuery('')
+            }}
+            immediate
+            as="div"
+          >
+            <Combobox.Label className="block text-sm font-medium leading-5 text-gray-700">
+              Assigned to
+            </Combobox.Label>
+
+            <div className="relative">
+              <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
+                <Combobox.Input
+                  onChange={(e) => setQuery(e.target.value)}
+                  className="border-none px-3 py-1 outline-none"
+                />
+                <Combobox.Button as={Button}>
+                  <span className="pointer-events-none flex items-center px-2">
+                    <svg
+                      className="h-5 w-5 text-gray-400"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </Combobox.Button>
+              </span>
+
+              <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
+                <Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+                  {people.map((name) => (
+                    <Combobox.Option
+                      key={name}
+                      value={name}
+                      className={({ active }) => {
+                        return classNames(
+                          'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                          active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                        )
+                      }}
+                    >
+                      {({ active, selected }) => (
+                        <>
+                          <span
+                            className={classNames(
+                              'block truncate',
+                              selected ? 'font-semibold' : 'font-normal'
+                            )}
+                          >
+                            {name}
+                          </span>
+                          {selected && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4',
+                                active ? 'text-white' : 'text-indigo-600'
+                              )}
+                            >
+                              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                  fillRule="evenodd"
+                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))}
+                </Combobox.Options>
+              </div>
+            </div>
+          </Combobox>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/playground-vue/src/components/combobox/combobox-open-on-focus.vue b/packages/playground-vue/src/components/combobox/combobox-open-on-focus.vue
new file mode 100644
index 000000000..41208f127
--- /dev/null
+++ b/packages/playground-vue/src/components/combobox/combobox-open-on-focus.vue
@@ -0,0 +1,146 @@
+<script>
+import { ref, defineComponent, computed, onMounted, watch } from 'vue'
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxLabel,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@headlessui/vue'
+
+let everybody = [
+  { id: 1, name: 'Wade Cooper' },
+  { id: 2, name: 'Arlene Mccoy' },
+  { id: 3, name: 'Devon Webb' },
+  { id: 4, name: 'Tom Cook' },
+  { id: 5, name: 'Tanya Fox' },
+  { id: 6, name: 'Hellen Schmidt' },
+  { id: 7, name: 'Caroline Schultz' },
+  { id: 8, name: 'Mason Heaney' },
+  { id: 9, name: 'Claudie Smitham' },
+  { id: 10, name: 'Emil Schaefer' },
+]
+
+export default defineComponent({
+  components: {
+    Combobox,
+    ComboboxButton,
+    ComboboxInput,
+    ComboboxLabel,
+    ComboboxOption,
+    ComboboxOptions,
+  },
+  setup() {
+    let query = ref('')
+    let activePerson = ref(everybody[2]) // everybody[Math.floor(Math.random() * everybody.length)]
+    let filteredPeople = computed(() => {
+      return query.value === ''
+        ? everybody
+        : everybody.filter((person) => {
+            return person.name.toLowerCase().includes(query.value.toLowerCase())
+          })
+    })
+
+    // Choose a random person on mount
+    onMounted(() => {
+      activePerson.value = everybody[Math.floor(Math.random() * everybody.length)]
+    })
+
+    watch(activePerson, () => {
+      query.value = ''
+    })
+
+    return {
+      query,
+      activePerson,
+      filteredPeople,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
+    <div class="mx-auto w-full max-w-xs">
+      <div class="py-8 font-mono text-xs">
+        Selected person: {{ activePerson?.name ?? 'Nobody yet' }}
+      </div>
+      <div class="space-y-1">
+        <Combobox v-model="activePerson" as="div" immediate>
+          <ComboboxLabel class="block text-sm font-medium leading-5 text-gray-700">
+            Assigned to
+          </ComboboxLabel>
+
+          <div class="relative">
+            <span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
+              <ComboboxInput
+                @change="query = $event.target.value"
+                :displayValue="(person) => person?.name ?? ''"
+                class="border-none px-3 py-1 outline-none"
+              />
+              <ComboboxButton
+                class="cursor-default border-l bg-gray-100 px-1 text-indigo-600 focus:outline-none"
+              >
+                <span class="pointer-events-none flex items-center px-2">
+                  <svg
+                    class="h-5 w-5 text-gray-400"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </span>
+              </ComboboxButton>
+            </span>
+
+            <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
+              <ComboboxOptions
+                class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5"
+              >
+                <ComboboxOption
+                  v-for="person in filteredPeople"
+                  :key="person.id"
+                  :value="person"
+                  v-slot="{ active, selected }"
+                >
+                  <div
+                    :class="[
+                      'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                      active ? 'bg-indigo-600 text-white' : 'text-gray-900',
+                    ]"
+                  >
+                    <span :class="['block truncate', selected ? 'font-semibold' : 'font-normal']">
+                      {{ person.name }}
+                    </span>
+                    <span
+                      v-if="selected"
+                      :class="[
+                        'absolute inset-y-0 right-0 flex items-center pr-4',
+                        active ? 'text-white' : 'text-indigo-600',
+                      ]"
+                    >
+                      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </ComboboxOption>
+              </ComboboxOptions>
+            </div>
+          </div>
+        </Combobox>
+      </div>
+    </div>
+  </div>
+</template>