add dedicated test to ensure changing the defaultIndex has no effect

tailwindlabs · Dec 1, 2021 · 71ddfd8 · 71ddfd8
1 parent 96de085
commit 71ddfd8
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git 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.Group defaultIndex={defaultIndex}>
+              <Tab.List>
+                <Tab>Tab 1</Tab>
+                <Tab>Tab 2</Tab>
+                <Tab>Tab 3</Tab>
+              </Tab.List>
+
+              <Tab.Panels>
+                <Tab.Panel>Content 1</Tab.Panel>
+                <Tab.Panel>Content 2</Tab.Panel>
+                <Tab.Panel>Content 3</Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+
+            <button>after</button>
+            <button onClick={() => setDefaultIndex(0)}>change</button>
+          </>
+        )
+      }
+
+      render(<Example />)
+
+      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
@@ -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`
+          <TabGroup :defaultIndex="defaultIndex">
+            <TabList>
+              <Tab>Tab 1</Tab>
+              <Tab>Tab 2</Tab>
+              <Tab>Tab 3</Tab>
+            </TabList>
+
+            <TabPanels>
+              <TabPanel>Content 1</TabPanel>
+              <TabPanel>Content 2</TabPanel>
+              <TabPanel>Content 3</TabPanel>
+            </TabPanels>
+          </TabGroup>
+
+          <button>after</button>
+          <button @click="defaultIndex = 0">change</button>
+        `,
+        setup() {
+          let defaultIndex = ref(1)
+          return { defaultIndex }
+        },
+      })
+
+      await new Promise<void>(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 })
+    })
   })
 })