Fix hover scroll

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Forward the `ref` to all components ([#1116](https://github.com/tailwindlabs/headlessui/pull/1116))
 - Ensure links are triggered inside `Popover Panel` components ([#1153](https://github.com/tailwindlabs/headlessui/pull/1153))
 - Improve SSR for `Tab` component ([#1155](https://github.com/tailwindlabs/headlessui/pull/1155))
+- Fix `hover` scroll ([#1161](https://github.com/tailwindlabs/headlessui/pull/1161))
 
 ## [Unreleased - @headlessui/vue]
 
@@ -21,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure that you can close the combobox initially ([#1148](https://github.com/tailwindlabs/headlessui/pull/1148))
 - Fix Dialog usage in Tabs ([#1149](https://github.com/tailwindlabs/headlessui/pull/1149))
 - Ensure links are triggered inside `Popover Panel` components ([#1153](https://github.com/tailwindlabs/headlessui/pull/1153))
+- Fix `hover` scroll ([#1161](https://github.com/tailwindlabs/headlessui/pull/1161))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

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

@@ -41,6 +41,11 @@ enum ComboboxStates {
   Closed,
 }
 
+enum ActivationTrigger {
+  Pointer,
+  Other,
+}
+
 type ComboboxOptionDataRef = MutableRefObject<{
   textValue?: string
   disabled: boolean
@@ -70,6 +75,7 @@ interface StateDefinition {
   disabled: boolean
   options: { id: string; dataRef: ComboboxOptionDataRef }[]
   activeOptionIndex: number | null
+  activationTrigger: ActivationTrigger
 }
 
 enum ActionTypes {
@@ -88,8 +94,12 @@ type Actions =
   | { type: ActionTypes.CloseCombobox }
   | { type: ActionTypes.OpenCombobox }
   | { type: ActionTypes.SetDisabled; disabled: boolean }
-  | { type: ActionTypes.GoToOption; focus: Focus.Specific; id: string }
-  | { type: ActionTypes.GoToOption; focus: Exclude<Focus, Focus.Specific> }
+  | { type: ActionTypes.GoToOption; focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
+  | {
+      type: ActionTypes.GoToOption
+      focus: Exclude<Focus, Focus.Specific>
+      trigger?: ActivationTrigger
+    }
   | { type: ActionTypes.RegisterOption; id: string; dataRef: ComboboxOptionDataRef }
   | { type: ActionTypes.UnregisterOption; id: string }
 
@@ -130,7 +140,11 @@ let reducers: {
     })
 
     if (state.activeOptionIndex === activeOptionIndex) return state
-    return { ...state, activeOptionIndex }
+    return {
+      ...state,
+      activeOptionIndex,
+      activationTrigger: action.trigger ?? ActivationTrigger.Other,
+    }
   },
   [ActionTypes.RegisterOption]: (state, action) => {
     let currentActiveOption =
@@ -158,6 +172,7 @@ let reducers: {
         // the correct index.
         return options.indexOf(currentActiveOption)
       })(),
+      activationTrigger: ActivationTrigger.Other,
     }
 
     if (
@@ -189,6 +204,7 @@ let reducers: {
         // fix this, we will find the correct (new) index position.
         return nextOptions.indexOf(currentActiveOption)
       })(),
+      activationTrigger: ActivationTrigger.Other,
     }
   },
 }
@@ -275,6 +291,7 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<
     disabled,
     options: [],
     activeOptionIndex: null,
+    activationTrigger: ActivationTrigger.Other,
   } as StateDefinition)
   let [{ comboboxState, options, activeOptionIndex, optionsRef, inputRef, buttonRef }, dispatch] =
     reducerBag
@@ -882,12 +899,13 @@ let Option = forwardRefWithAs(function Option<
     if (state.comboboxState !== ComboboxStates.Open) return
     if (!active) return
     if (!enableScrollIntoView.current) return
+    if (state.activationTrigger === ActivationTrigger.Pointer) return
     let d = disposables()
     d.requestAnimationFrame(() => {
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.comboboxState, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeOptionIndex])
+  }, [id, active, state.comboboxState, state.activationTrigger, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeOptionIndex])
 
   let handleClick = useCallback(
     (event: { preventDefault: Function }) => {
@@ -907,7 +925,12 @@ let Option = forwardRefWithAs(function Option<
   let handleMove = useCallback(() => {
     if (disabled) return
     if (active) return
-    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Specific, id })
+    dispatch({
+      type: ActionTypes.GoToOption,
+      focus: Focus.Specific,
+      id,
+      trigger: ActivationTrigger.Pointer,
+    })
   }, [disabled, active, id, dispatch])
 
   let handleLeave = useCallback(() => {

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

@@ -39,6 +39,11 @@ enum ListboxStates {
   Closed,
 }
 
+enum ActivationTrigger {
+  Pointer,
+  Other,
+}
+
 type ListboxOptionDataRef = MutableRefObject<{
   textValue?: string
   disabled: boolean
@@ -59,6 +64,7 @@ interface StateDefinition {
   options: { id: string; dataRef: ListboxOptionDataRef }[]
   searchQuery: string
   activeOptionIndex: number | null
+  activationTrigger: ActivationTrigger
 }
 
 enum ActionTypes {
@@ -81,8 +87,12 @@ type Actions =
   | { type: ActionTypes.OpenListbox }
   | { type: ActionTypes.SetDisabled; disabled: boolean }
   | { type: ActionTypes.SetOrientation; orientation: StateDefinition['orientation'] }
-  | { type: ActionTypes.GoToOption; focus: Focus.Specific; id: string }
-  | { type: ActionTypes.GoToOption; focus: Exclude<Focus, Focus.Specific> }
+  | { type: ActionTypes.GoToOption; focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
+  | {
+      type: ActionTypes.GoToOption
+      focus: Exclude<Focus, Focus.Specific>
+      trigger?: ActivationTrigger
+    }
   | { type: ActionTypes.Search; value: string }
   | { type: ActionTypes.ClearSearch }
   | { type: ActionTypes.RegisterOption; id: string; dataRef: ListboxOptionDataRef }
@@ -124,7 +134,12 @@ let reducers: {
     })
 
     if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state
-    return { ...state, searchQuery: '', activeOptionIndex }
+    return {
+      ...state,
+      searchQuery: '',
+      activeOptionIndex,
+      activationTrigger: action.trigger ?? ActivationTrigger.Other,
+    }
   },
   [ActionTypes.Search]: (state, action) => {
     if (state.disabled) return state
@@ -151,7 +166,12 @@ let reducers: {
     let matchIdx = matchingOption ? state.options.indexOf(matchingOption) : -1
 
     if (matchIdx === -1 || matchIdx === state.activeOptionIndex) return { ...state, searchQuery }
-    return { ...state, searchQuery, activeOptionIndex: matchIdx }
+    return {
+      ...state,
+      searchQuery,
+      activeOptionIndex: matchIdx,
+      activationTrigger: ActivationTrigger.Other,
+    }
   },
   [ActionTypes.ClearSearch](state) {
     if (state.disabled) return state
@@ -193,6 +213,7 @@ let reducers: {
         // fix this, we will find the correct (new) index position.
         return nextOptions.indexOf(currentActiveOption)
       })(),
+      activationTrigger: ActivationTrigger.Other,
     }
   },
 }
@@ -249,6 +270,7 @@ let ListboxRoot = forwardRefWithAs(function Listbox<
     options: [],
     searchQuery: '',
     activeOptionIndex: null,
+    activationTrigger: ActivationTrigger.Other,
   } as StateDefinition)
   let [{ listboxState, propsRef, optionsRef, buttonRef }, dispatch] = reducerBag
 
@@ -674,12 +696,13 @@ let Option = forwardRefWithAs(function Option<
   useIsoMorphicEffect(() => {
     if (state.listboxState !== ListboxStates.Open) return
     if (!active) return
+    if (state.activationTrigger === ActivationTrigger.Pointer) return
     let d = disposables()
     d.requestAnimationFrame(() => {
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.listboxState, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeOptionIndex])
+  }, [id, active, state.listboxState, state.activationTrigger, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeOptionIndex])
 
   let handleClick = useCallback(
     (event: { preventDefault: Function }) => {
@@ -699,7 +722,12 @@ let Option = forwardRefWithAs(function Option<
   let handleMove = useCallback(() => {
     if (disabled) return
     if (active) return
-    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Specific, id })
+    dispatch({
+      type: ActionTypes.GoToOption,
+      focus: Focus.Specific,
+      id,
+      trigger: ActivationTrigger.Pointer,
+    })
   }, [disabled, active, id, dispatch])
 
   let handleLeave = useCallback(() => {

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

@@ -41,6 +41,11 @@ enum MenuStates {
   Closed,
 }
 
+enum ActivationTrigger {
+  Pointer,
+  Other,
+}
+
 type MenuItemDataRef = MutableRefObject<{ textValue?: string; disabled: boolean }>
 
 interface StateDefinition {
@@ -50,6 +55,7 @@ interface StateDefinition {
   items: { id: string; dataRef: MenuItemDataRef }[]
   searchQuery: string
   activeItemIndex: number | null
+  activationTrigger: ActivationTrigger
 }
 
 enum ActionTypes {
@@ -66,8 +72,12 @@ enum ActionTypes {
 type Actions =
   | { type: ActionTypes.CloseMenu }
   | { type: ActionTypes.OpenMenu }
-  | { type: ActionTypes.GoToItem; focus: Focus.Specific; id: string }
-  | { type: ActionTypes.GoToItem; focus: Exclude<Focus, Focus.Specific> }
+  | { type: ActionTypes.GoToItem; focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
+  | {
+      type: ActionTypes.GoToItem
+      focus: Exclude<Focus, Focus.Specific>
+      trigger?: ActivationTrigger
+    }
   | { type: ActionTypes.Search; value: string }
   | { type: ActionTypes.ClearSearch }
   | { type: ActionTypes.RegisterItem; id: string; dataRef: MenuItemDataRef }
@@ -96,7 +106,12 @@ let reducers: {
     })
 
     if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state
-    return { ...state, searchQuery: '', activeItemIndex }
+    return {
+      ...state,
+      searchQuery: '',
+      activeItemIndex,
+      activationTrigger: action.trigger ?? ActivationTrigger.Other,
+    }
   },
   [ActionTypes.Search]: (state, action) => {
     let wasAlreadySearching = state.searchQuery !== ''
@@ -117,7 +132,12 @@ let reducers: {
 
     let matchIdx = matchingItem ? state.items.indexOf(matchingItem) : -1
     if (matchIdx === -1 || matchIdx === state.activeItemIndex) return { ...state, searchQuery }
-    return { ...state, searchQuery, activeItemIndex: matchIdx }
+    return {
+      ...state,
+      searchQuery,
+      activeItemIndex: matchIdx,
+      activationTrigger: ActivationTrigger.Other,
+    }
   },
   [ActionTypes.ClearSearch](state) {
     if (state.searchQuery === '') return state
@@ -156,6 +176,7 @@ let reducers: {
         // fix this, we will find the correct (new) index position.
         return nextItems.indexOf(currentActiveItem)
       })(),
+      activationTrigger: ActivationTrigger.Other,
     }
   },
 }
@@ -195,6 +216,7 @@ let MenuRoot = forwardRefWithAs(function Menu<TTag extends ElementType = typeof
     items: [],
     searchQuery: '',
     activeItemIndex: null,
+    activationTrigger: ActivationTrigger.Other,
   } as StateDefinition)
   let [{ menuState, itemsRef, buttonRef }, dispatch] = reducerBag
   let menuRef = useSyncRefs(ref)
@@ -543,12 +565,13 @@ let Item = forwardRefWithAs(function Item<TTag extends ElementType = typeof DEFA
   useIsoMorphicEffect(() => {
     if (state.menuState !== MenuStates.Open) return
     if (!active) return
+    if (state.activationTrigger === ActivationTrigger.Pointer) return
     let d = disposables()
     d.requestAnimationFrame(() => {
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.menuState, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeItemIndex])
+  }, [id, active, state.menuState, state.activationTrigger, /* We also want to trigger this when the position of the active item changes so that we can re-trigger the scrollIntoView */ state.activeItemIndex])
 
   let bag = useRef<MenuItemDataRef['current']>({ disabled })
 
@@ -583,7 +606,12 @@ let Item = forwardRefWithAs(function Item<TTag extends ElementType = typeof DEFA
   let handleMove = useCallback(() => {
     if (disabled) return
     if (active) return
-    dispatch({ type: ActionTypes.GoToItem, focus: Focus.Specific, id })
+    dispatch({
+      type: ActionTypes.GoToItem,
+      focus: Focus.Specific,
+      id,
+      trigger: ActivationTrigger.Pointer,
+    })
   }, [disabled, active, id, dispatch])
 
   let handleLeave = useCallback(() => {

packages/@headlessui-react/src/components/popover/popover.test.tsx

@@ -1862,7 +1862,7 @@ describe('Keyboard interactions', () => {
         assertActiveElement(getPopoverButton())
 
         // Verify that we got redirected to the href
-        expect(window.location.hash).toEqual('#closed')
+        expect(document.location.hash).toEqual('#closed')
       })
     )
   })