From c2bf9dd0e9d354dd34b7c300519567ee7b25f298 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 17 Aug 2023 10:53:58 -0400
Subject: [PATCH] Prevent scrolling when focusing a tab (#2674)

* Prevent scrolling when focusing a tab

* Update changelog
---
 packages/@headlessui-react/CHANGELOG.md                 | 1 +
 packages/@headlessui-react/src/components/tabs/tabs.tsx | 2 +-
 packages/@headlessui-vue/CHANGELOG.md                   | 1 +
 packages/@headlessui-vue/src/components/tabs/tabs.ts    | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 656dc60d7..c60abc465 100644
--- 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
index 15f554c38..11357b5d8 100644
--- 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
index 2613dc8ae..7d36fdbfe 100644
--- 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
index a12afc525..915ef38a0 100644
--- 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(() => {