diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index 63166ba00..9978db3ab 100644 --- a/components/menu/src/Menu.tsx +++ b/components/menu/src/Menu.tsx @@ -100,6 +100,39 @@ export default defineComponent({ const isRtl = computed(() => direction.value === 'rtl'); const mergedMode = ref('vertical'); const mergedInlineCollapsed = ref(false); + + const isInlineMode = computed(() => mergedMode.value === 'inline'); + + // >>>>> Cache & Reset open keys when inlineCollapsed changed + const inlineCacheOpenKeys = ref([]); + + // Cache + watchEffect(() => { + if (isInlineMode.value) { + inlineCacheOpenKeys.value = mergedOpenKeys.value; + } + }); + + const mountRef = ref(false); + + // Restore + watch(isInlineMode, () => { + if (!mountRef.value) { + mountRef.value = true; + return; + } + + if (isInlineMode.value) { + mergedOpenKeys.value = inlineCacheOpenKeys.value; + } else { + const empty = []; + mergedOpenKeys.value = empty; + // Trigger open event in case its in control + emit('update:openKeys', empty); + emit('openChange', empty); + } + }); + watchEffect(() => { if (props.mode === 'inline' && inlineCollapsed.value) { mergedMode.value = 'vertical'; @@ -152,7 +185,7 @@ export default defineComponent({ if (!shallowEqual(mergedOpenKeys, newOpenKeys)) { mergedOpenKeys.value = newOpenKeys; emit('update:openKeys', newOpenKeys); - emit('openChange', key, open); + emit('openChange', newOpenKeys); } };