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 }) + }) }) })