From da91e1528c952f55d3c4b573acead3664d9d83dd Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 16 Feb 2022 15:18:09 -0500 Subject: [PATCH 1/3] Fix active item flicker --- .../@headlessui-react/src/components/combobox/combobox.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index a47349c5af..e99a3e314c 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/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]) From 840e4398c0c5e2c5328c846fc207034ffb70f493 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 17 Feb 2022 11:31:46 +0100 Subject: [PATCH 2/3] apply `nextFrame` -> `requestAnimationFrame` fix to other components --- packages/@headlessui-react/src/components/listbox/listbox.tsx | 4 +++- packages/@headlessui-react/src/components/menu/menu.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index 1931534f6d..fce0f5f07c 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/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]) diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index 04f34b39b9..6df8751ebd 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.tsx @@ -535,7 +535,9 @@ function Item( 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]) From 4aecbc198a50a8d6fb3f698738d1ffd0d2076238 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 17 Feb 2022 11:34:39 +0100 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 674dff4658..b4e503099f 100644 --- a/CHANGELOG.md +++ b/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