Ensure correct DOM node order when performing focus actions

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Ensure portal root exists in the DOM ([#950](https://github.com/tailwindlabs/headlessui/pull/950))
+- Ensure correct DOM node order when performing focus actions ([#1038](https://github.com/tailwindlabs/headlessui/pull/1038))
 
 ### Added
 
@@ -21,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix missing key binding in examples ([#1036](https://github.com/tailwindlabs/headlessui/pull/1036), [#1006](https://github.com/tailwindlabs/headlessui/pull/1006))
 - Fix slice => splice typo in `Tabs` component ([#1037](https://github.com/tailwindlabs/headlessui/pull/1037), [#986](https://github.com/tailwindlabs/headlessui/pull/986))
+- Ensure correct DOM node order when performing focus actions ([#1038](https://github.com/tailwindlabs/headlessui/pull/1038))
 
 ### Added
 

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

@@ -75,6 +75,45 @@ describe('Rendering', () => {
     assertTabs({ active: 0 })
   })
 
+  it('should guarantee the order of DOM nodes when performing actions', async () => {
+    function Example() {
+      let [hide, setHide] = useState(false)
+
+      return (
+        <>
+          <button onClick={() => setHide(v => !v)}>toggle</button>
+          <Tab.Group>
+            <Tab.List>
+              <Tab>Tab 1</Tab>
+              {!hide && <Tab>Tab 2</Tab>}
+              <Tab>Tab 3</Tab>
+            </Tab.List>
+
+            <Tab.Panels>
+              <Tab.Panel>Content 1</Tab.Panel>
+              {!hide && <Tab.Panel>Content 2</Tab.Panel>}
+              <Tab.Panel>Content 3</Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </>
+      )
+    }
+
+    render(<Example />)
+
+    await click(getByText('toggle')) // Remove Tab 2
+    await click(getByText('toggle')) // Re-add Tab 2
+
+    await press(Keys.Tab)
+    assertTabs({ active: 0 })
+
+    await press(Keys.ArrowRight)
+    assertTabs({ active: 1 })
+
+    await press(Keys.ArrowRight)
+    assertTabs({ active: 2 })
+  })
+
   describe('`renderProps`', () => {
     it('should expose the `selectedIndex` on the `Tab.Group` component', async () => {
       render(

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -358,10 +358,6 @@ export function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
   }
   let passThroughProps = props
 
-  if (process.env.NODE_ENV === 'test') {
-    Object.assign(propsWeControl, { 'data-headlessui-index': myIndex })
-  }
-
   return render({
     props: { ...passThroughProps, ...propsWeControl },
     slot,
@@ -433,10 +429,6 @@ function Panel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     tabIndex: selected ? 0 : -1,
   }
 
-  if (process.env.NODE_ENV === 'test') {
-    Object.assign(propsWeControl, { 'data-headlessui-index': myIndex })
-  }
-
   let passThroughProps = props
 
   return render({

packages/@headlessui-react/src/test-utils/accessibility-assertions.ts

@@ -1224,8 +1224,8 @@ export function assertTabs(
     expect(list).toHaveAttribute('role', 'tablist')
     expect(list).toHaveAttribute('aria-orientation', orientation)
 
-    let activeTab = tabs.find(tab => tab.dataset.headlessuiIndex === '' + active)
-    let activePanel = panels.find(panel => panel.dataset.headlessuiIndex === '' + active)
+    let activeTab = Array.from(list.querySelectorAll('[id^="headlessui-tabs-tab-"]'))[active]
+    let activePanel = panels.find(panel => panel.id === activeTab.getAttribute('aria-controls'))
 
     for (let tab of tabs) {
       expect(tab).toHaveAttribute('id')

packages/@headlessui-react/src/utils/focus-management.ts

@@ -103,7 +103,15 @@ export function focusElement(element: HTMLElement | null) {
 }
 
 export function focusIn(container: HTMLElement | HTMLElement[], focus: Focus) {
-  let elements = Array.isArray(container) ? container : getFocusableElements(container)
+  let elements = Array.isArray(container)
+    ? container.slice().sort((a, b) => {
+        let position = a.compareDocumentPosition(b)
+
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+        return 0
+      })
+    : getFocusableElements(container)
   let active = document.activeElement as HTMLElement
 
   let direction = (() => {

packages/@headlessui-vue/src/components/tabs/tabs.test.ts

@@ -101,6 +101,51 @@ describe('Rendering', () => {
     assertTabs({ active: 0 })
   })
 
+  it('should guarantee the order of DOM nodes when performing actions', async () => {
+    renderTemplate({
+      template: html`
+        <button @click="toggle()">toggle</button>
+        <TabGroup>
+          <TabList>
+            <Tab>Tab 1</Tab>
+            <Tab v-if="!hide">Tab 2</Tab>
+            <Tab>Tab 3</Tab>
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>Content 1</TabPanel>
+            <TabPanel v-if="!hide">Content 2</TabPanel>
+            <TabPanel>Content 3</TabPanel>
+          </TabPanels>
+        </TabGroup>
+      `,
+      setup() {
+        let hide = ref(false)
+
+        return {
+          hide,
+          toggle() {
+            hide.value = !hide.value
+          },
+        }
+      },
+    })
+
+    await new Promise<void>(nextTick)
+
+    await click(getByText('toggle')) // Remove Tab 2
+    await click(getByText('toggle')) // Re-add Tab 2
+
+    await press(Keys.Tab)
+    assertTabs({ active: 0 })
+
+    await press(Keys.ArrowRight)
+    assertTabs({ active: 1 })
+
+    await press(Keys.ArrowRight)
+    assertTabs({ active: 2 })
+  })
+
   describe('`renderProps`', () => {
     it('should expose the `selectedIndex` on the `Tabs` component', async () => {
       renderTemplate(

packages/@headlessui-vue/src/components/tabs/tabs.ts

@@ -199,10 +199,6 @@ export let Tab = defineComponent({
       disabled: this.$props.disabled ? true : undefined,
     }
 
-    if (process.env.NODE_ENV === 'test') {
-      Object.assign(propsWeControl, { ['data-headlessui-index']: this.myIndex })
-    }
-
     return render({
       props: { ...this.$props, ...propsWeControl },
       slot,
@@ -334,10 +330,6 @@ export let TabPanel = defineComponent({
       tabIndex: this.selected ? 0 : -1,
     }
 
-    if (process.env.NODE_ENV === 'test') {
-      Object.assign(propsWeControl, { ['data-headlessui-index']: this.myIndex })
-    }
-
     return render({
       props: { ...this.$props, ...propsWeControl },
       slot,

packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts

@@ -1224,8 +1224,8 @@ export function assertTabs(
     expect(list).toHaveAttribute('role', 'tablist')
     expect(list).toHaveAttribute('aria-orientation', orientation)
 
-    let activeTab = tabs.find(tab => tab.dataset.headlessuiIndex === '' + active)
-    let activePanel = panels.find(panel => panel.dataset.headlessuiIndex === '' + active)
+    let activeTab = Array.from(list.querySelectorAll('[id^="headlessui-tabs-tab-"]'))[active]
+    let activePanel = panels.find(panel => panel.id === activeTab.getAttribute('aria-controls'))
 
     for (let tab of tabs) {
       expect(tab).toHaveAttribute('id')

packages/@headlessui-vue/src/utils/focus-management.ts

@@ -96,7 +96,15 @@ export function focusElement(element: HTMLElement | null) {
 }
 
 export function focusIn(container: HTMLElement | HTMLElement[], focus: Focus) {
-  let elements = Array.isArray(container) ? container : getFocusableElements(container)
+  let elements = Array.isArray(container)
+    ? container.slice().sort((a, b) => {
+        let position = a.compareDocumentPosition(b)
+
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+        return 0
+      })
+    : getFocusableElements(container)
   let active = document.activeElement as HTMLElement
 
   let direction = (() => {