fix(menu): defaultExpandedKeys use watchEffect to initialize (#1541)

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- Fix `n-menu` 's `defaultExpandedKeys` use watchEffect initialize, closes [#1536](https://github.com/TuSimple/naive-ui/issues/1536).
+
 ## 2.20.2 (2021-11-05)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- 修复 `n-menu` 的 `defaultExpandedKeys` 使用 watchEffect 初始化，关闭 [#1536](https://github.com/TuSimple/naive-ui/issues/1536)
+
 ## 2.20.2 (2021-11-05)
 
 ### Feats

src/menu/src/Menu.tsx

@@ -10,7 +10,8 @@ import {
   InjectionKey,
   CSSProperties,
   inject,
-  VNodeChild
+  VNodeChild,
+  watchEffect
 } from 'vue'
 import { createTreeMate, Key } from 'treemate'
 import { useCompitable, useMergedState } from 'vooks'
@@ -182,16 +183,16 @@ export default defineComponent({
       controlledValueRef,
       uncontrolledValueRef
     )
-
-    const uncontrolledExpandedKeysRef = ref(
-      props.defaultExpandAll
+    const uncontrolledExpandedKeysRef = ref<Key[]>([])
+    watchEffect(() => {
+      uncontrolledExpandedKeysRef.value = props.defaultExpandAll
         ? treeMateRef.value.getNonLeafKeys()
         : props.defaultExpandedNames ||
             props.defaultExpandedKeys ||
             treeMateRef.value.getPath(mergedValueRef.value, {
               includeSelf: false
             }).keyPath
-    )
+    })
     const controlledExpandedKeysRef = useCompitable(props, [
       'expandedNames',
       'expandedKeys'

src/menu/tests/Menu.spec.tsx

@@ -305,4 +305,45 @@ describe('n-menu', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const menu = <NMenu options={[{}]} />
   })
+
+  it('should work with `defaultExpandedKeys` props', async () => {
+    const menuOptions = [
+      {
+        label: '且听风吟',
+        key: 'hear-the-wind-sing'
+      },
+      {
+        label: '舞，舞，舞',
+        key: 'dance-dance-dance',
+        children: [
+          {
+            label: '叙事者',
+            key: 'narrator'
+          },
+          {
+            label: '食物',
+            key: 'food',
+            children: [
+              {
+                label: '三明治',
+                key: 'sandwich'
+              }
+            ]
+          },
+          {
+            label: '过去增多，未来减少',
+            key: 'the-past-increases-the-future-recedes'
+          }
+        ]
+      }
+    ]
+    const defaultExpandedKeys = ['dance-dance-dance']
+    const wrapper = mount(NMenu, {
+      props: {
+        defaultExpandedKeys,
+        options: menuOptions
+      }
+    })
+    expect(wrapper.find('.n-submenu-children').element.children.length).toBe(3)
+  })
 })