huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Next release (#916)

Browse Source 
* placeholder for next release

* Ensure portal root exists in the DOM (#950)

* ensure that the portal root is always in the DOM

When using NextJS, it happens that between page transitions the portal
root gets removed form the DOM. We will check the DOM when the `target`
updates, and if it doesn't exist anymore, then we will re-insert it in
the DOM.

* update changelog

* Allow `Tabs` to be controllable (#970)

* feat(react): Allow Tab Component to be controlled

* fix falsy bug

`selectedIndex || defaultIndex` would result in the `defaultIndex` if
`selectedIndex` is set to 0. This means that if you have this code:

```js
<Tab.Group selectedIndex={0} defaultIndex={2} />
```

That you will never be able to see the very first tab, unless you
provided a negative value like `-1`.

`selectedIndex ?? defaultIndex` fixes this, since it purely checkes for
`undefined` and `null`.

* implemented controllable Tabs for Vue

* add dedicated test to ensure changing the defaultIndex has no effect

* update changelog

Co-authored-by: ChiefORZ <seb.schaffernak@gmail.com>

* Fix missing key binding in examples (#1036)

Co-authored-by: superDragon <xkloveme@gmail.com>

* Fix slice => splice typo in Vue Tabs component (#1037)

Co-authored-by: Ryan Gossiaux <ryan.gossiaux@gmail.com>

* update changelog

* Ensure correct DOM node order when performing focus actions (#1038)

* ensure that the order of DOM nodes is correct

When we are performing actions like `focusIn(list, Focus.First)` then we
have to ensrue that we are working with the correct list that is
properly sorted.

It can happen that the list of DOM nodes is out of sync. This can happen
if you have 3 Tabs, hide the second (which triggers an unmount and an
`unregister` of the Tab), then re-add the second item in the middle.
This will re-add the item to the end of the list instead of in the middle.

We can solve this by always sorting items when we are adding / removing
items, but this is a bit more error prone because it is easy to forget.
Instead we will sort it when performing the actual keyboard action.

If we didn't provide a list but an element, then we use a
getFocusableElements(element) function, but this already gives you a
correctly sorted list so we don't need to do that for this list.

* add tests to prove the correct order when performing actions

* cleanup code just for tests

It could still happen that this internal list is not ordered correctly
but that's not really a problem we just have the list to keep track of
things.

For our tests we now use the position from the DOM directly.

* update changelog

Co-authored-by: ChiefORZ <seb.schaffernak@gmail.com>
Co-authored-by: superDragon <xkloveme@gmail.com>
Co-authored-by: Ryan Gossiaux <ryan.gossiaux@gmail.com>
This commit is contained in:
Robin Malfait
2022-01-14 18:38:14 +01:00
committed by GitHub
parent e9e6aded54
commit 3bc7545169
11 changed files with 666 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/src/components/portal/portal.tsx
+9
View File
@@ -34,6 +34,15 @@ function usePortalTarget(): HTMLElement | null {
return document.body.appendChild(root)
})
// Ensure the portal root is always in the DOM
useEffect(() => {
if (target === null) return
if (!document.body.contains(target)) {
document.body.appendChild(target)
}
}, [target])
useEffect(() => {
if (forceInRoot) return
if (groupTarget === null) return
packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+283 -1
View File
@@ -1,4 +1,4 @@
import React, { createElement } from 'react'
import React, { createElement, useState } from 'react'
import { render } from '@testing-library/react'
import { Tab } from './tabs'
@@ -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(
@@ -415,6 +454,249 @@ 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`', () => {
it('should be possible to change active tab controlled and uncontrolled', async () => {
let handleChange = jest.fn()
function ControlledTabs() {
let [selectedIndex, setSelectedIndex] = useState(0)
return (
<>
<Tab.Group
selectedIndex={selectedIndex}
onChange={value => {
setSelectedIndex(value)
handleChange(value)
}}
>
<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={() => setSelectedIndex(prev => prev + 1)}>setSelectedIndex</button>
</>
)
}
render(<ControlledTabs />)
assertActiveElement(document.body)
// test uncontrolled behaviour
await click(getByText('Tab 2'))
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenNthCalledWith(1, 1)
assertTabs({ active: 1 })
// test controlled behaviour
await click(getByText('setSelectedIndex'))
assertTabs({ active: 2 })
})
it('should jump to the nearest tab when the selectedIndex is out of bounds (-2)', async () => {
render(
<>
<Tab.Group selectedIndex={-2}>
<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>
</>
)
assertActiveElement(document.body)
await press(Keys.Tab)
assertTabs({ active: 0 })
assertActiveElement(getByText('Tab 1'))
})
it('should jump to the nearest tab when the selectedIndex is out of bounds (+5)', async () => {
render(
<>
<Tab.Group selectedIndex={5}>
<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>
</>
)
assertActiveElement(document.body)
await press(Keys.Tab)
assertTabs({ active: 2 })
assertActiveElement(getByText('Tab 3'))
})
it('should jump to the next available tab when the selectedIndex is a disabled tab', async () => {
render(
<>
<Tab.Group selectedIndex={0}>
<Tab.List>
<Tab disabled>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>
</>
)
assertActiveElement(document.body)
await press(Keys.Tab)
assertTabs({ active: 1 })
assertActiveElement(getByText('Tab 2'))
})
it('should jump to the next available tab when the selectedIndex is a disabled tab and wrap around', async () => {
render(
<>
<Tab.Group defaultIndex={2}>
<Tab.List>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab disabled>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>
</>
)
assertActiveElement(document.body)
await press(Keys.Tab)
assertTabs({ active: 0 })
assertActiveElement(getByText('Tab 1'))
})
it('should prefer selectedIndex over defaultIndex', async () => {
render(
<>
<Tab.Group selectedIndex={0} defaultIndex={2}>
<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>
</>
)
assertActiveElement(document.body)
await press(Keys.Tab)
assertTabs({ active: 0 })
assertActiveElement(getByText('Tab 1'))
})
})
describe(`'Tab'`, () => {
packages/@headlessui-react/src/components/tabs/tabs.tsx
+17 -15
View File
@@ -127,11 +127,19 @@ function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(
props: Props<TTag, TabsRenderPropArg> & {
defaultIndex?: number
onChange?: (index: number) => void
selectedIndex?: number
vertical?: boolean
manual?: boolean
}
) {
let { defaultIndex = 0, vertical = false, manual = false, onChange, ...passThroughProps } = props
let {
defaultIndex = 0,
vertical = false,
manual = false,
onChange,
selectedIndex = null,
...passThroughProps
} = props
const orientation = vertical ? 'vertical' : 'horizontal'
const activation = manual ? 'manual' : 'auto'
@@ -161,18 +169,20 @@ function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(
useEffect(() => {
if (state.tabs.length <= 0) return
if (state.selectedIndex !== null) return
if (selectedIndex === null && state.selectedIndex !== null) return
let tabs = state.tabs.map(tab => tab.current).filter(Boolean) as HTMLElement[]
let focusableTabs = tabs.filter(tab => !tab.hasAttribute('disabled'))
let indexToSet = selectedIndex ?? defaultIndex
// Underflow
if (defaultIndex < 0) {
if (indexToSet < 0) {
dispatch({ type: ActionTypes.SetSelectedIndex, index: tabs.indexOf(focusableTabs[0]) })
}
// Overflow
else if (defaultIndex > state.tabs.length) {
else if (indexToSet > state.tabs.length) {
dispatch({
type: ActionTypes.SetSelectedIndex,
index: tabs.indexOf(focusableTabs[focusableTabs.length - 1]),
@@ -181,15 +191,15 @@ function Tabs<TTag extends ElementType = typeof DEFAULT_TABS_TAG>(
// Middle
else {
let before = tabs.slice(0, defaultIndex)
let after = tabs.slice(defaultIndex)
let before = tabs.slice(0, indexToSet)
let after = tabs.slice(indexToSet)
let next = [...after, ...before].find(tab => focusableTabs.includes(tab))
if (!next) return
dispatch({ type: ActionTypes.SetSelectedIndex, index: tabs.indexOf(next) })
}
}, [defaultIndex, state.tabs, state.selectedIndex])
}, [defaultIndex, selectedIndex, state.tabs, state.selectedIndex])
let lastChangedIndex = useRef(state.selectedIndex)
let providerBag = useMemo<ContextType<typeof TabsContext>>(
@@ -348,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,
@@ -423,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({