fix(collapse): expanded status is lost when using v-if with n-collapse-item, closes #1387

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- Fix `n-collapse`'s expanded status is lost when using `v-if` with `n-collapse-item`, closes [#1387](https://github.com/TuSimple/naive-ui/issues/1387).
+
 ### Feats
 
 - `n-menu` add `dropdown-props` prop, closes [#1345](https://github.com/TuSimple/naive-ui/issues/1345).

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- 修复 `n-collapse` 在 `n-collapse-item` 使用 `v-if` 是展开状态丢失，关闭 [#1387](https://github.com/TuSimple/naive-ui/issues/1387)
+
 ### Feats
 
 - `n-menu` 新增 `dropdown-props` 属性，关闭 [#1345](https://github.com/TuSimple/naive-ui/issues/1345)

src/collapse/src/Collapse.tsx

@@ -11,14 +11,13 @@ import {
   CSSProperties,
   Slots
 } from 'vue'
-import { intersection } from 'lodash-es'
+import { useMergedState } from 'vooks'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { call, ExtractPublicPropTypes, warn } from '../../_utils'
 import type { MaybeArray } from '../../_utils'
 import { collapseLight, CollapseTheme } from '../styles'
 import style from './styles/index.cssr'
-import { useMergedState } from 'vooks'
 import {
   OnItemHeaderClick,
   OnUpdateExpandedNames,
@@ -83,7 +82,6 @@ export interface NCollapseInjection {
   props: ExtractPropTypes<typeof collapseProps>
   expandedNamesRef: Ref<string | number | Array<string | number> | null>
   mergedClsPrefixRef: Ref<string>
-  collectedItemNames: Array<string | number>
   slots: Slots
   toggleItem: (
     collapse: boolean,
@@ -108,7 +106,6 @@ export default defineComponent({
       controlledExpandedNamesRef,
       uncontrolledExpandedNamesRef
     )
-    const collectedItemNames: string[] = []
     const themeRef = useTheme(
       'Collapse',
       'Collapse',
@@ -164,7 +161,7 @@ export default defineComponent({
           doUpdateExpandedNames([name])
           doItemHeaderClick({ name, expanded: true, event })
         } else {
-          const activeNames = intersection(expandedNames, collectedItemNames)
+          const activeNames = expandedNames
           const index = activeNames.findIndex(
             (activeName) => name === activeName
           )
@@ -184,7 +181,6 @@ export default defineComponent({
       props,
       mergedClsPrefixRef,
       expandedNamesRef: mergedExpandedNamesRef,
-      collectedItemNames,
       slots,
       toggleItem
     })

src/collapse/src/CollapseItem.tsx

@@ -2,7 +2,6 @@ import { h, defineComponent, PropType, inject, computed, renderSlot } from 'vue'
 import { createId } from 'seemly'
 import { useMemo } from 'vooks'
 import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons'
-import { useInjectionCollection } from '../../_utils/composable'
 import { NBaseIcon } from '../../_internal'
 import { ExtractPublicPropTypes, throwError } from '../../_utils'
 import { collapseInjectionKey } from './Collapse'
@@ -37,11 +36,7 @@ export default defineComponent({
       mergedClsPrefixRef,
       slots: collapseSlots
     } = NCollapse
-    useInjectionCollection(
-      collapseInjectionKey,
-      'collectedItemNames',
-      mergedNameRef
-    )
+
     const collapsedRef = computed<boolean>(() => {
       const { value: expandedNames } = expandedNamesRef
       if (Array.isArray(expandedNames)) {