From bd8e88dd330586e1ccc29a7c6bebc6fa93ac7d61 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 17 Feb 2022 14:55:13 +0100
Subject: [PATCH] Trigger scrollIntoView effect when position changes (#1113)

* trigger scrollIntoView effect when position changes

This is important otherwise it could happen that the current active item
is still the active item even if we inserted X items before the current
one. This will result in the active item being out of the current
viewport. To fix this, we will also make sure to trigger the effect if
the position of the active item changes.

* update changelog
---
 CHANGELOG.md                                               | 1 +
 .../@headlessui-react/src/components/combobox/combobox.tsx | 7 ++++++-
 .../@headlessui-react/src/components/listbox/listbox.tsx   | 7 ++++++-
 packages/@headlessui-react/src/components/menu/menu.tsx    | 7 ++++++-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4e5030..4394566 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve build files ([#1078](https://github.com/tailwindlabs/headlessui/pull/1078))
 - Ensure typeahead stays on same item if it still matches ([#1098](https://github.com/tailwindlabs/headlessui/pull/1098))
 - Fix off-by-one frame issue causing flicker ([#1111](https://github.com/tailwindlabs/headlessui/pull/1111))
+- Trigger scrollIntoView effect when position changes ([#1113](https://github.com/tailwindlabs/headlessui/pull/1113))
 
 ### Added
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index e99a3e3..3c6c114 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -860,7 +860,12 @@ function Option<
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.comboboxState])
+  }, [
+    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,
+  ])
 
   let handleClick = useCallback(
     (event: { preventDefault: Function }) => {
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index fce0f5f..e4abbd3 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -670,7 +670,12 @@ function Option<
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.listboxState])
+  }, [
+    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,
+  ])
 
   let handleClick = useCallback(
     (event: { preventDefault: Function }) => {
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 6df8751..edb6932 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -539,7 +539,12 @@ function Item<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
       document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
     })
     return d.dispose
-  }, [id, active, state.menuState])
+  }, [
+    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,
+  ])
 
   let bag = useRef<MenuItemDataRef['current']>({ disabled })