naive-ui
naive-ui copied to clipboard
fix(cascader): fix position calculation on reopening menu, closes #7321
Description
Fix NCascader position calculation error when reopening the dropdown menu.
Closes #7321
Problem
When NCascader is positioned near the right edge of the screen:
- First open: expanding multiple levels correctly shifts the popup left (because there's not enough space on the right)
- Second open: the popup doesn't shift left, causing later level content to be clipped
Root Cause
The original [useOnResize] only registers the resize handler once on component mount. However, the CascaderMenu DOM is destroyed when show=false (returns null in render). When reopened, a new DOM element is created but the resize handler is still bound to the old element, so expanding levels doesn't trigger [syncCascaderMenuPosition].
Solution
-
CascaderMenu.tsx: Replace [useOnResize] with
watch(selfElRef)to re-register resize handler when DOM is recreated -
Cascader.tsx: Reset
transformstyle before callingsyncPositionto ensuregetBoundingClientRectreturns correct values for position calculation