Fix off-by-one frame issue causing flicker (#1111)

* Fix active item flicker

* apply `nextFrame` -> `requestAnimationFrame` fix to other components

* update changelog

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve overal codebase, use modern tech like `esbuild` and TypeScript 4! ([#1055](https://github.com/tailwindlabs/headlessui/pull/1055))
 - 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))
 
 ### Added
 

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

@@ -856,7 +856,9 @@ function Option<
     if (state.comboboxState !== ComboboxStates.Open) return
     if (!active) return
     let d = disposables()
-    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    d.requestAnimationFrame(() => {
+      document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
+    })
     return d.dispose
   }, [id, active, state.comboboxState])
 

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

@@ -666,7 +666,9 @@ function Option<
     if (state.listboxState !== ListboxStates.Open) return
     if (!active) return
     let d = disposables()
-    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    d.requestAnimationFrame(() => {
+      document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
+    })
     return d.dispose
   }, [id, active, state.listboxState])
 

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

@@ -535,7 +535,9 @@ function Item<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     if (state.menuState !== MenuStates.Open) return
     if (!active) return
     let d = disposables()
-    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    d.requestAnimationFrame(() => {
+      document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' })
+    })
     return d.dispose
   }, [id, active, state.menuState])