diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c61ae5987..5b20595738 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow to override the `type` on the `ComboboxInput` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476)) - Ensure the the `` closes correctly ([#1477](https://github.com/tailwindlabs/headlessui/pull/1477)) +- Only render the `FocusSentinel` if required in the `Tabs` component ([#1493](https://github.com/tailwindlabs/headlessui/pull/1493)) ### Added @@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow to override the `type` on the `Combobox.Input` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476)) - Ensure the the `` closes correctly ([#1477](https://github.com/tailwindlabs/headlessui/pull/1477)) +- Only render the `FocusSentinel` if required in the `Tabs` component ([#1493](https://github.com/tailwindlabs/headlessui/pull/1493)) ### Added diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index 6973bbcbcb..2cc1bbc08e 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx @@ -144,6 +144,7 @@ function useData(component: string) { } return context } +type _Data = ReturnType let TabsActionsContext = createContext<{ registerTab(tab: MutableRefObject): () => void @@ -162,6 +163,7 @@ function useActions(component: string) { } return context } +type _Actions = ReturnType function stateReducer(state: StateDefinition, action: Actions) { return match(action.type, reducers, state, action) @@ -205,13 +207,13 @@ let Tabs = forwardRefWithAs(function Tabs {})) let stableTabsRef = useLatestValue(state.tabs) - let tabsData = useMemo>( + let tabsData = useMemo<_Data>( () => ({ orientation, activation, ...state }), [orientation, activation, state] ) let lastChangedIndex = useLatestValue(state.selectedIndex) - let tabsActions: ContextType = useMemo( + let tabsActions: _Actions = useMemo( () => ({ registerTab(tab) { dispatch({ type: ActionTypes.RegisterTab, tab }) @@ -245,18 +247,20 @@ let Tabs = forwardRefWithAs(function Tabs - { - for (let tab of stableTabsRef.current) { - if (tab.current?.tabIndex === 0) { - tab.current?.focus() - return true + {tabsData.tabs.length <= 0 && ( + { + for (let tab of stableTabsRef.current) { + if (tab.current?.tabIndex === 0) { + tab.current?.focus() + return true + } } - } - return false - }} - /> + return false + }} + /> + )} {render({ ourProps, theirProps, diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts index 72334d8528..afe6d4ea69 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts @@ -139,19 +139,20 @@ export let TabGroup = defineComponent({ let slot = { selectedIndex: selectedIndex.value } return h(Fragment, [ - h(FocusSentinel, { - onFocus: () => { - for (let tab of tabs.value) { - let el = dom(tab) - if (el?.tabIndex === 0) { - el.focus() - return true + tabs.value.length <= 0 && + h(FocusSentinel, { + onFocus: () => { + for (let tab of tabs.value) { + let el = dom(tab) + if (el?.tabIndex === 0) { + el.focus() + return true + } } - } - return false - }, - }), + return false + }, + }), render({ props: { ...attrs,