[Bug] a-layout-sider Fails to Properly Collapse Under Specific Circumstances

[CHANG, TZU-YEN]

Expected

From the ant-design-vue official example, a-layout-sider should collapse normally.

Actual

In the same code's reproduction, a-layout-sider does not collapse as expected.

Please note that this issue occurs only when collapsing and then switching menu items. Furthermore, after switching, the disappearance of the icon could be the main cause.

The following error message is generated:

runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <DashboardOutlined> 
  at <TooltipContent key="content" prefixCls="aj-tooltip" id=undefined  ... > 
  at <Align target=fn<bound getRootDomNode> key="popup" ref=Ref< Proxy(Object) {__v_skip: true, forceAlign: ƒ} >  ... > 
  at <BaseTransition onBeforeEnter=fn<onBeforeEnter> appear=true persisted=false  ... > 
  at <Transition ref=Ref< <div class=​"aj-tooltip aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s aj-tooltip-placement-right" style=​"left:​ -779px;​ top:​ -927px;​ display:​ none;​">​…​</div>​ > name="aj-zoom-big-fast" appear=true  ... > 
  at <PopupInner prefixCls="aj-tooltip" point=null align= {points: Array(2), overflow: {…}, offset: Array(2), targetOffset: Array(2), ignoreShake: true}  ... > 
  at <Popup prefixCls="aj-tooltip" destroyPopupOnHide=false visible=false  ... > 
  at <Portal getContainer=fn<getContainer3> ref=Ref< Proxy(Object) {…} > didUpdate=fn<bound handlePortalUpdate> > 
  at <PortalWrapper key="portal" getContainer=fn didUpdate=fn<bound handlePortalUpdate>  ... > 
  at <Trigger popupClassName="aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s" prefixCls="aj-tooltip" action="hover"  ... > 
  at <Tooltip title= (2) [{…}, {…}] overlayClassName="aj-menu-inline-collapsed-tooltip css-dev-only-do-not-override-1qb1s0s" trigger="hover"  ... > 
  at <ATooltip title= (2) [{…}, {…}] placement="right" overlayClassName="aj-menu-inline-collapsed-tooltip" > 
  at <AMenuItem key="/dashboard" > 
  at <OverflowContextProvider key=0 value= {prefixCls: 'aj-menu-overflow-item', responsive: false, component: {…}, invalidate: true, order: 0, …} > 
  at <ResizeObserver disabled=true onResize=fn<onOverflowResize> > 
  at <Overflow onMousedown=undefined prefixCls="aj-menu-overflow" component="ul"  ... > 
  at <AMenu selected-keys= ['/dashboard'] onUpdate:selectedKeys=fn open-keys= []  ... > 
  at <ALayoutSider collapsible="" collapsed-width=48 width=220  ... > 
  at <Anonymous hasSider=undefined prefixCls="aj-layout" tagName="section"  ... > 
  at <ALayout class="layouts-default" > 
  at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider lang="zh_TW" prefix-cls="aj" > 
  at <Dashboard ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <LayoutLoader key="dashboard" layoutProps= {ref: RefImpl} name="dashboard" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="dashboard" name="dashboard"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
flushJobs @ runtime-core.esm-bundler.js:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:275
queueJob @ runtime-core.esm-bundler.js:269
scheduler @ runtime-core.esm-bundler.js:1838
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:966
(anonymous) @ reactivity.esm-bundler.js:1123
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:966
set value @ reactivity.esm-bundler.js:1010
handleSetCollapsed @ Sider.js:93
toggle @ Sider.js:146
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:595
Show 21 more frames
Show less
runtime-core.esm-bundler.js:4502 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'namespaceURI')
    at isSVGContainer (runtime-core.esm-bundler.js:4502:60)
    at hydrateNode (runtime-core.esm-bundler.js:4657:13)
    at hydrateSubTree (runtime-core.esm-bundler.js:5722:13)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5742:13)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5861:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5869:5)
    at mountComponent (runtime-core.esm-bundler.js:5659:5)
    at processComponent (runtime-core.esm-bundler.js:5612:9)
    at patch (runtime-core.esm-bundler.js:5087:11)

[yanyu]

try adding client-only

[CHANG, TZU-YEN]

@aibayanyu20 Thanks for reply, you can check my reproduction. It (client-only) has been add added in the code (app.vue). The bug still exists.

[CHANG, TZU-YEN]

Hi @aibayanyu20, any update?

[yanyu]

Hi @aibayanyu20, any update?

not yet