fix(comp:tabs): all tabs panel should have selected state (#1921)

IDuxFE · May 9, 2024 · b883501 · b883501
1 parent daf14b7
commit b883501
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/packages/components/tabs/src/Tabs.tsx b/packages/components/tabs/src/Tabs.tsx
@@ -81,6 +81,7 @@ export default defineComponent({
       isHorizontal,
       closedKeys,
       navAttrs,
+      selectedKey,
       handleTabClick,
       handleTabClose,
       setSelectedKey,

diff --git a/packages/components/tabs/src/contents/MoreSelectPane.tsx b/packages/components/tabs/src/contents/MoreSelectPane.tsx
@@ -7,7 +7,7 @@
 
 import { defineComponent, inject, shallowRef, watch } from 'vue'
 
-import { isString } from 'lodash-es'
+import { isNil, isString } from 'lodash-es'
 
 import { VKey, useState } from '@idux/cdk/utils'
 import { IxCol, IxRow } from '@idux/components/grid'
@@ -21,7 +21,7 @@ import { moreSelectPaneProps } from '../types'
 export default defineComponent({
   props: moreSelectPaneProps,
   setup(props, { slots }) {
-    const { props: tabsProps, mergedPrefixCls, handleTabClose, setSelectedKey } = inject(tabsToken)!
+    const { props: tabsProps, mergedPrefixCls, selectedKey, handleTabClose, setSelectedKey } = inject(tabsToken)!
 
     const [searchValue, setSearchValue] = useState('')
     const searchInputRef = shallowRef<InputInstance>()
@@ -105,6 +105,7 @@ export default defineComponent({
             v-slots={{
               optionLabel: optionLabelRender,
             }}
+            selectedKeys={!isNil(selectedKey.value) ? [selectedKey.value] : undefined}
             dataSource={mergedDataSource}
             onOptionClick={handleSelectChange}
             virtual

diff --git a/packages/components/tabs/src/tokens.ts b/packages/components/tabs/src/tokens.ts
@@ -21,6 +21,7 @@ export interface TabsContext {
   allTabsPanelVisible: ComputedRef<boolean>
   isHorizontal: ComputedRef<boolean>
   closedKeys: ComputedRef<VKey[]>
+  selectedKey: ComputedRef<VKey | undefined>
   navAttrs: Ref<Record<VKey, { offset: number; size: number } | undefined>>
   handleTabClick: (key: VKey, evt: Event) => Promise<void>
   handleTabClose: (key: VKey) => Promise<void>