Ensure mouse doesn't active item/option while navigating using the keyboard (#3769)

This PR fixes an issue where the mouse will activate the `MenuItem` or
`ListboxOption` below the cursor position even if you are using the
keyboard while navigating the menu or listbox.

This behavior is now consistent between the Menu, Listbox and Combobox
components.

The reason this was happening is that we are scrolling the active item
into view when using the keyboard. That in turn triggers events such as
`pointerenter`, `mouseenter`, `pointerleave` and `mouseleave` even
though you didn't move your cursor. Luckily `mousemove` events are not
triggered in this case.

Now we will ensure that the activation trigger (what tool you used to
navigate: keyboard or mouse) is the same and that the mouse did in fact
move before activating the item under the cursor.

Fixes: #3739

## Test plan

### Before:


https://github.com/user-attachments/assets/39a46b82-58dd-4e20-b81c-94760511301a

The Combobox was already behaving correctly.

### After:


https://github.com/user-attachments/assets/4c90dfb3-e2bc-4202-b4a9-fe682d7d49cf

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix incorrect double invocation of menu items, listbox options and combobox options ([#3766](https://github.com/tailwindlabs/headlessui/pull/3766))
 - Fix memory leak in SSR environment ([#3767](https://github.com/tailwindlabs/headlessui/pull/3767))
 - Ensure programmatic `.click()` on `MenuButton` ref works ([#3768](https://github.com/tailwindlabs/headlessui/pull/3768))
+- Don't activate hovered items while using the keyboard ([#3769](https://github.com/tailwindlabs/headlessui/pull/3769))
 
 ## [2.2.6] - 2025-07-24
 

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

@@ -1534,8 +1534,17 @@ function OptionFn<
   let handleMove = useEvent((evt) => {
     if (!pointer.wasMoved(evt)) return
     if (disabled) return
-    if (active) return
+
+    // Skip if the option is already active, however, if the activation trigger
+    // is not `Pointer` we have to convert it to a `Pointer` trigger
+    // activation instead.
+    if (active && machine.state.activationTrigger === ActivationTrigger.Pointer) return
+
     let idx = data.calculateIndex(value)
+
+    // pointermove / mousemove will only be fired when the pointer is actually
+    // moving, therefore we can go to the option with the `Pointer` activation
+    // trigger.
     machine.actions.goToOption({ focus: Focus.Specific, idx }, ActivationTrigger.Pointer)
   })
 
@@ -1544,6 +1553,12 @@ function OptionFn<
     if (disabled) return
     if (!active) return
     if (data.optionsPropsRef.current.hold) return
+
+    // pointerenter / mouseenter will be fired when the mouse is on top of an
+    // element that scrolls into view even when using the keyboard to
+    // navigate. Only handle the event when the pointer was actually moved.
+    if (machine.state.activationTrigger !== ActivationTrigger.Pointer) return
+
     machine.actions.goToOption({ focus: Focus.Nothing })
   })
 

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

@@ -919,24 +919,33 @@ function OptionFn<
 
   let pointer = useTrackedPointer()
 
-  let handleEnter = useEvent((evt) => {
-    pointer.update(evt)
-    if (disabled) return
-    if (active) return
-    machine.actions.goToOption({ focus: Focus.Specific, id }, ActivationTrigger.Pointer)
-  })
+  let handleEnter = useEvent((evt) => pointer.update(evt))
 
   let handleMove = useEvent((evt) => {
     if (!pointer.wasMoved(evt)) return
     if (disabled) return
-    if (active) return
+
+    // Skip if the option is already active, however, if the activation trigger
+    // is not `Pointer` we have to convert it to a `Pointer` trigger
+    // activation instead.
+    if (active && machine.state.activationTrigger === ActivationTrigger.Pointer) return
+
+    // pointermove / mousemove will only be fired when the pointer is actually
+    // moving, therefore we can go to the option with the `Pointer` activation
+    // trigger.
     machine.actions.goToOption({ focus: Focus.Specific, id }, ActivationTrigger.Pointer)
   })
 
   let handleLeave = useEvent((evt) => {
     if (!pointer.wasMoved(evt)) return
     if (disabled) return
     if (!active) return
+
+    // pointerenter / mouseenter will be fired when the mouse is on top of an
+    // element that scrolls into view even when using the keyboard to
+    // navigate. Only handle the event when the pointer was actually moved.
+    if (machine.state.activationTrigger !== ActivationTrigger.Pointer) return
+
     machine.actions.goToOption({ focus: Focus.Nothing })
   })
 

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

@@ -690,22 +690,16 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
 
   let pointer = useTrackedPointer()
 
-  let handleEnter = useEvent((event) => {
-    pointer.update(event)
-    if (disabled) return
-    if (active) return
-    machine.send({
-      type: ActionTypes.GoToItem,
-      focus: Focus.Specific,
-      id,
-      trigger: ActivationTrigger.Pointer,
-    })
-  })
+  let handleEnter = useEvent((event) => pointer.update(event))
 
   let handleMove = useEvent((event) => {
     if (!pointer.wasMoved(event)) return
     if (disabled) return
     if (active) return
+
+    // pointermove / mousemove will only be fired when the pointer is actually
+    // moving, therefore we can go to the option with the `Pointer` activation
+    // trigger.
     machine.send({
       type: ActionTypes.GoToItem,
       focus: Focus.Specific,
@@ -718,6 +712,12 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     if (!pointer.wasMoved(event)) return
     if (disabled) return
     if (!active) return
+
+    // pointerenter / mouseenter will be fired when the mouse is on top of an
+    // element that scrolls into view even when using the keyboard to
+    // navigate. Only handle the event when the pointer was actually moved.
+    if (machine.state.activationTrigger !== ActivationTrigger.Pointer) return
+
     machine.send({ type: ActionTypes.GoToItem, focus: Focus.Nothing })
   })