diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
index e352990fdf..4f233892d0 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
@@ -415,6 +415,53 @@ describe('Rendering', () => {
assertTabs({ active: 0 })
assertActiveElement(getByText('Tab 1'))
})
+
+ it('should not change the Tab if the defaultIndex changes', async () => {
+ function Example() {
+ let [defaultIndex, setDefaultIndex] = useState(1)
+
+ return (
+ <>
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+
+
+
+ >
+ )
+ }
+
+ render()
+
+ assertActiveElement(document.body)
+
+ await press(Keys.Tab)
+
+ assertTabs({ active: 1 })
+ assertActiveElement(getByText('Tab 2'))
+
+ await click(getByText('Tab 3'))
+
+ assertTabs({ active: 2 })
+ assertActiveElement(getByText('Tab 3'))
+
+ // Change default index
+ await click(getByText('change'))
+
+ // Nothing should change...
+ assertTabs({ active: 2 })
+ })
})
describe('`selectedIndex`', () => {
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
index 8f8ab2acb3..4acc8794dd 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts
@@ -433,6 +433,53 @@ describe('Rendering', () => {
assertTabs({ active: 0 })
assertActiveElement(getByText('Tab 1'))
})
+
+ it('should not change the Tab if the defaultIndex changes', async () => {
+ renderTemplate({
+ template: html`
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+
+
+
+ `,
+ setup() {
+ let defaultIndex = ref(1)
+ return { defaultIndex }
+ },
+ })
+
+ await new Promise(nextTick)
+
+ assertActiveElement(document.body)
+
+ await press(Keys.Tab)
+
+ assertTabs({ active: 1 })
+ assertActiveElement(getByText('Tab 2'))
+
+ await click(getByText('Tab 3'))
+
+ assertTabs({ active: 2 })
+ assertActiveElement(getByText('Tab 3'))
+
+ // Change default index
+ await click(getByText('change'))
+
+ // Nothing should change...
+ assertTabs({ active: 2 })
+ })
})
})