From ea5f21af8e5876dea861d8f7c46cc9c94adb1798 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 10 Jun 2022 17:53:36 +0200
Subject: [PATCH] Improve Combobox input cursor position (#1574)

* fix(combobox): fix focus on option select

* update changelog

Co-authored-by: Dan Roujinsky <d.roujinsky@island.io>
---
 packages/@headlessui-react/CHANGELOG.md                         | 1 +
 packages/@headlessui-react/src/components/combobox/combobox.tsx | 2 +-
 packages/@headlessui-vue/CHANGELOG.md                           | 1 +
 packages/@headlessui-vue/src/components/combobox/combobox.ts    | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index d832f4b69..afb18d99c 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix incorrect transitionend/transitioncancel events for the Transition component ([#1537](https://github.com/tailwindlabs/headlessui/pull/1537))
 - Improve outside click of `Dialog` component ([#1546](https://github.com/tailwindlabs/headlessui/pull/1546))
 - Detect outside clicks from within `<iframe>` elements ([#1552](https://github.com/tailwindlabs/headlessui/pull/1552))
+- Improve Combobox input cursor position ([#1574](https://github.com/tailwindlabs/headlessui/pull/1574))
 
 ## [1.6.4] - 2022-05-29
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index e00d55fdd..2fadc64dc 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1064,7 +1064,7 @@ let Option = forwardRefWithAs(function Option<
     select()
     if (data.mode === ValueMode.Single) {
       actions.closeCombobox()
-      disposables().nextFrame(() => data.inputRef.current?.focus({ preventScroll: true }))
+      data.inputRef.current?.focus({ preventScroll: true })
     }
   })
 
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 0a0edfb67..2cc90c4ce 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve outside click of `Dialog` component ([#1546](https://github.com/tailwindlabs/headlessui/pull/1546))
 - Detect outside clicks from within `<iframe>` elements ([#1552](https://github.com/tailwindlabs/headlessui/pull/1552))
 - Only render the `Dialog` on the client ([#1566](https://github.com/tailwindlabs/headlessui/pull/1566))
+- Improve Combobox input cursor position ([#1574](https://github.com/tailwindlabs/headlessui/pull/1574))
 
 ## [1.6.4] - 2022-05-29
 
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
index 4bdb9c193..43f66f71c 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -892,7 +892,7 @@ export let ComboboxOption = defineComponent({
       api.selectOption(id)
       if (api.mode.value === ValueMode.Single) {
         api.closeCombobox()
-        nextTick(() => dom(api.inputRef)?.focus({ preventScroll: true }))
+        dom(api.inputRef)?.focus({ preventScroll: true })
       }
     }