Re-focus Combobox.Input when a Combobox.Option is selected (#2272)

* re-focus `Combobox.Input` when a `Combobox.Option` is selected

Except on mobile devices (ideally devices using a virtual keyboard), so
that the virtual keyboard won't be triggered every single time we
re-focus that input field.

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure we handle `null` dataRef values correctly ([#2258](https://github.com/tailwindlabs/headlessui/pull/2258))
 - Move `aria-multiselectable` to `[role=listbox]` in the `Combobox` component ([#2271](https://github.com/tailwindlabs/headlessui/pull/2271))
+- Re-focus `Combobox.Input` when a `Combobox.Option` is selected ([#2272](https://github.com/tailwindlabs/headlessui/pull/2272))
 
 ## [1.7.10] - 2023-02-06
 

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

@@ -44,6 +44,7 @@ import { Keys } from '../keyboard'
 import { useControllable } from '../../hooks/use-controllable'
 import { useWatch } from '../../hooks/use-watch'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { isMobile } from '../../utils/platform'
 
 enum ComboboxState {
   Open,
@@ -1277,6 +1278,22 @@ let Option = forwardRefWithAs(function Option<
     if (data.mode === ValueMode.Single) {
       actions.closeCombobox()
     }
+
+    // We want to make sure that we don't accidentally trigger the virtual keyboard.
+    //
+    // This would happen if the input is focused, the options are open, you select an option (which
+    // would blur the input, and focus the option (button), then we re-focus the input).
+    //
+    // This would be annoying on mobile (or on devices with a virtual keyboard). Right now we are
+    // assuming that the virtual keyboard would open on mobile devices (iOS / Android). This
+    // assumption is not perfect, but will work in the majority of the cases.
+    //
+    // Ideally we can have a better check where we can explicitly check for the virtual keyboard.
+    // 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())
+    }
   })
 
   let handleFocus = useEvent(() => {

packages/@headlessui-react/src/utils/platform.ts

@@ -1,3 +1,6 @@
+// This file contains functions to detect the platform the app is running on. They aren't perfect,
+// and we are making assumptions here. But it's the best we can do for now.
+
 export function isIOS() {
   // TODO: This is not a great way to detect iOS, but it's the best I can do for now.
   // - `window.platform` is deprecated
@@ -12,3 +15,11 @@ export function isIOS() {
     (/Mac/gi.test(window.navigator.platform) && window.navigator.maxTouchPoints > 0)
   )
 }
+
+export function isAndroid() {
+  return /Android/gi.test(window.navigator.userAgent)
+}
+
+export function isMobile() {
+  return isIOS() || isAndroid()
+}

packages/@headlessui-vue/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don’t fire `afterLeave` event more than once for a given transition ([#2267](https://github.com/tailwindlabs/headlessui/pull/2267))
 - Move `aria-multiselectable` to `[role=listbox]` in the `Combobox` component ([#2271](https://github.com/tailwindlabs/headlessui/pull/2271))
+- Re-focus `Combobox.Input` when a `Combobox.Option` is selected ([#2272](https://github.com/tailwindlabs/headlessui/pull/2272))
 
 ## [1.7.9] - 2023-02-03
 

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -36,6 +36,7 @@ import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
 import { objectToFormEntries } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { isMobile } from '../../utils/platform'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z
@@ -1063,6 +1064,22 @@ export let ComboboxOption = defineComponent({
       if (api.mode.value === ValueMode.Single) {
         api.closeCombobox()
       }
+
+      // We want to make sure that we don't accidentally trigger the virtual keyboard.
+      //
+      // This would happen if the input is focused, the options are open, you select an option
+      // (which would blur the input, and focus the option (button), then we re-focus the input).
+      //
+      // This would be annoying on mobile (or on devices with a virtual keyboard). Right now we are
+      // assuming that the virtual keyboard would open on mobile devices (iOS / Android). This
+      // assumption is not perfect, but will work in the majority of the cases.
+      //
+      // Ideally we can have a better check where we can explicitly check for the virtual keyboard.
+      // 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())
+      }
     }
 
     function handleFocus() {

packages/@headlessui-vue/src/utils/platform.ts

@@ -1,3 +1,6 @@
+// This file contains functions to detect the platform the app is running on. They aren't perfect,
+// and we are making assumptions here. But it's the best we can do for now.
+
 export function isIOS() {
   // TODO: This is not a great way to detect iOS, but it's the best I can do for now.
   // - `window.platform` is deprecated
@@ -12,3 +15,11 @@ export function isIOS() {
     (/Mac/gi.test(window.navigator.platform) && window.navigator.maxTouchPoints > 0)
   )
 }
+
+export function isAndroid() {
+  return /Android/gi.test(window.navigator.userAgent)
+}
+
+export function isMobile() {
+  return isIOS() || isAndroid()
+}