naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

fix(cascader): fix position calculation on reopening menu, closes #7321

Open c01dwave opened this issue 4 months ago • 0 comments

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:

  1. First open: expanding multiple levels correctly shifts the popup left (because there's not enough space on the right)
  2. 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

  1. CascaderMenu.tsx: Replace [useOnResize] with watch(selfElRef) to re-register resize handler when DOM is recreated
  2. Cascader.tsx: Reset transform style before calling syncPosition to ensure getBoundingClientRect returns correct values for position calculation

c01dwave avatar Dec 04 '25 08:12 c01dwave