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 <malfait.robin@gmail.com>

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])