Prevent scrolling when focusing a tab (#2674)

* Prevent scrolling when focusing a tab * Update changelog
tailwindlabs · Aug 17, 2023 · c2bf9dd · c2bf9dd · vercel · Aug 17, 2023
1 parent a317866
commit c2bf9dd
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `appear` works using the `Transition` component (even when used with SSR) ([#2646](https://github.com/tailwindlabs/headlessui/pull/2646))
 - Improve resetting values when using the `nullable` prop on the `Combobox` component ([#2660](https://github.com/tailwindlabs/headlessui/pull/2660))
 - Fix hydration of components inside `<Suspense>` ([#2663](https://github.com/tailwindlabs/headlessui/pull/2663))
+- Prevent scrolling when focusing a tab ([#2674](https://github.com/tailwindlabs/headlessui/pull/2674))
 
 ## [1.7.16] - 2023-07-27
 

diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -472,7 +472,7 @@ function TabFn<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     if (ready.current) return
     ready.current = true
 
-    internalTabRef.current?.focus()
+    internalTabRef.current?.focus({ preventScroll: true })
     actions.change(myIndex)
 
     microTask(() => {

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve SSR of the `Disclosure` component ([#2645](https://github.com/tailwindlabs/headlessui/pull/2645))
 - Fix incorrectly focused `ComboboxInput` component on page load ([#2654](https://github.com/tailwindlabs/headlessui/pull/2654))
 - Improve resetting values when using the `nullable` prop on the `Combobox` component ([#2660](https://github.com/tailwindlabs/headlessui/pull/2660))
+- Prevent scrolling when focusing a tab ([#2674](https://github.com/tailwindlabs/headlessui/pull/2674))
 
 ## [1.7.15] - 2023-07-27
 

diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -405,7 +405,7 @@ export let Tab = defineComponent({
 
       if (props.disabled) return
 
-      dom(internalTabRef)?.focus()
+      dom(internalTabRef)?.focus({ preventScroll: true })
       api.setSelectedIndex(myIndex.value)
 
       microTask(() => {