From e140e848d4f0d3ebaaecbeabc462da5353d670e8 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 17 Oct 2021 18:51:47 +0800
Subject: [PATCH] fix(collapse): expanded status is lost when using `v-if` with
 `n-collapse-item`, closes #1387

---
 CHANGELOG.en-US.md                | 6 ++++++
 CHANGELOG.zh-CN.md                | 6 ++++++
 src/collapse/src/Collapse.tsx     | 8 ++------
 src/collapse/src/CollapseItem.tsx | 7 +------
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index b9dad709a..10da7c855 100644
--- a/CHANGELOG.en-US.md
+++ b/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).
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 478210204..481396b6c 100644
--- a/CHANGELOG.zh-CN.md
+++ b/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)
diff --git a/src/collapse/src/Collapse.tsx b/src/collapse/src/Collapse.tsx
index 395f39812..3a1db3a2c 100644
--- a/src/collapse/src/Collapse.tsx
+++ b/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
     })
diff --git a/src/collapse/src/CollapseItem.tsx b/src/collapse/src/CollapseItem.tsx
index 858015e95..0e3a60198 100644
--- a/src/collapse/src/CollapseItem.tsx
+++ b/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)) {