add input move check to Combobox

Author: RobinMalfait

packages/@headlessui-react/src/components/combobox/combobox-machine.ts

@@ -2,6 +2,11 @@ import { Machine } from '../../machine'
 import { ActionTypes as StackActionTypes, stackMachines } from '../../machines/stack-machine'
 import type { EnsureArray } from '../../types'
 import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
+import {
+  ElementPositionState,
+  computeVisualPosition,
+  detectMovement,
+} from '../../utils/element-movement'
 import { sortByDomNode } from '../../utils/focus-management'
 import { match } from '../../utils/match'
 
@@ -74,6 +79,9 @@ export interface State<T> {
   buttonElement: HTMLButtonElement | null
   optionsElement: HTMLElement | null
 
+  // Track input to determine if it moved
+  inputPositionState: ElementPositionState
+
   __demoMode: boolean
 }
 
@@ -96,6 +104,8 @@ export enum ActionTypes {
   SetInputElement,
   SetButtonElement,
   SetOptionsElement,
+
+  MarkInputAsMoved,
 }
 
 function adjustOrderedState<T>(
@@ -160,13 +170,17 @@ type Actions<T> =
   | { type: ActionTypes.SetInputElement; element: HTMLInputElement | null }
   | { type: ActionTypes.SetButtonElement; element: HTMLButtonElement | null }
   | { type: ActionTypes.SetOptionsElement; element: HTMLElement | null }
+  | { type: ActionTypes.MarkInputAsMoved }
 
 let reducers: {
   [P in ActionTypes]: <T>(state: State<T>, action: Extract<Actions<T>, { type: P }>) => State<T>
 } = {
   [ActionTypes.CloseCombobox](state) {
     if (state.dataRef.current?.disabled) return state
     if (state.comboboxState === ComboboxState.Closed) return state
+    let inputPositionState = state.inputElement
+      ? ElementPositionState.Tracked(computeVisualPosition(state.inputElement))
+      : state.inputPositionState
 
     return {
       ...state,
@@ -181,6 +195,8 @@ let reducers: {
       // for example, not scrolling to the active option in a virtual list
       activationTrigger: ActivationTrigger.Other,
 
+      inputPositionState,
+
       __demoMode: false,
     }
   },
@@ -197,11 +213,17 @@ let reducers: {
           activeOptionIndex: idx,
           comboboxState: ComboboxState.Open,
           __demoMode: false,
+          inputPositionState: ElementPositionState.Idle,
         }
       }
     }
 
-    return { ...state, comboboxState: ComboboxState.Open, __demoMode: false }
+    return {
+      ...state,
+      comboboxState: ComboboxState.Open,
+      inputPositionState: ElementPositionState.Idle,
+      __demoMode: false,
+    }
   },
   [ActionTypes.SetTyping](state, action) {
     if (state.isTyping === action.isTyping) return state
@@ -404,6 +426,14 @@ let reducers: {
     if (state.optionsElement === action.element) return state
     return { ...state, optionsElement: action.element }
   },
+  [ActionTypes.MarkInputAsMoved](state) {
+    if (state.inputPositionState.kind !== 'Tracked') return state
+
+    return {
+      ...state,
+      inputPositionState: ElementPositionState.Moved,
+    }
+  },
 }
 
 export class ComboboxMachine<T> extends Machine<State<T>, Actions<T>> {
@@ -438,6 +468,7 @@ export class ComboboxMachine<T> extends Machine<State<T>, Actions<T>> {
       buttonElement: null,
       optionsElement: null,
       __demoMode,
+      inputPositionState: ElementPositionState.Idle,
     })
   }
 
@@ -464,6 +495,20 @@ export class ComboboxMachine<T> extends Machine<State<T>, Actions<T>> {
       this.on(ActionTypes.OpenCombobox, () => stackMachine.actions.push(id))
       this.on(ActionTypes.CloseCombobox, () => stackMachine.actions.pop(id))
     }
+
+    // Track whether the input moved or not
+    this.disposables.group((d) => {
+      this.on(ActionTypes.CloseCombobox, (state) => {
+        if (!state.inputElement) return
+
+        d.dispose()
+        d.add(
+          detectMovement(state.inputElement, state.inputPositionState, () => {
+            this.send({ type: ActionTypes.MarkInputAsMoved })
+          })
+        )
+      })
+    })
   }
 
   actions = {
@@ -640,6 +685,10 @@ export class ComboboxMachine<T> extends Machine<State<T>, Actions<T>> {
 
       return true
     },
+
+    didInputMove(state: State<T>) {
+      return state.inputPositionState.kind === 'Moved'
+    },
   }
 
   reduce(state: Readonly<State<T>>, action: Actions<T>): State<T> {

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

@@ -1261,6 +1261,21 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     ),
   })
 
+  // We keep track whether the input moved or not, we only check this when the
+  // combobox state becomes closed. If the input moved, then we want to cancel
+  // pending transitions to prevent that the attached `ComboboxOptions` is still
+  // transitioning while the input visually moved away.
+  //
+  // If we don't cancel these transitions then there will be a period where the
+  // `ComboboxOptions` is visible and moving around because it is trying to
+  // re-position itself based on the new position.
+  let didInputMove = useSlice(machine, machine.selectors.didInputMove)
+
+  // Now that we know that the input did move or not, we can either disable the
+  // panel and all of its transitions, or rely on the `visible` state to hide
+  // the panel whenever necessary.
+  let panelEnabled = didInputMove ? false : visible
+
   useIsoMorphicEffect(() => {
     data.optionsPropsRef.current.static = props.static ?? false
   }, [data.optionsPropsRef, props.static])
@@ -1392,7 +1407,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
           slot,
           defaultTag: DEFAULT_OPTIONS_TAG,
           features: OptionsRenderFeatures,
-          visible,
+          visible: panelEnabled,
           name: 'Combobox.Options',
         })}
       </ComboboxDataContext.Provider>