diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx index a8c4f844815..2f8cb6860a2 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx @@ -814,6 +814,62 @@ test('Maintains stable maxTagCount to prevent click target disappearing in oneLi expect(withinSelector.getByText('+ 2 ...')).toBeVisible(); }); +test('dropdown width matches input width after tags collapse in oneLine mode', async () => { + render( +
+ , diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx index 2ce52dd66cc..ead92724684 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx @@ -149,6 +149,8 @@ const Select = forwardRef( // Prevent maxTagCount change during click events to avoid click target disappearing const [stableMaxTagCount, setStableMaxTagCount] = useState(maxTagCount); const isOpeningRef = useRef(false); + const selectContainerRef = useRef(null); + const [dropdownWidth, setDropdownWidth] = useState(true); useEffect(() => { if (oneLine) { @@ -159,12 +161,23 @@ const Select = forwardRef( requestAnimationFrame(() => { setStableMaxTagCount(0); isOpeningRef.current = false; + + // Measure collapsed width and update dropdown width + const selectElement = + selectContainerRef.current?.querySelector('.ant-select'); + if (selectElement) { + const { width } = selectElement.getBoundingClientRect(); + if (width > 0) { + setDropdownWidth(width); + } + } }); return; } if (!isDropdownVisible) { // When closing, immediately show the first tag setStableMaxTagCount(1); + setDropdownWidth(true); // Reset to default when closing isOpeningRef.current = false; } return; @@ -717,7 +730,11 @@ const Select = forwardRef( }; return ( - + {header && ( {header} )} @@ -777,7 +794,7 @@ const Select = forwardRef( options={visibleOptions} optionRender={option => {option.label || option.value}} oneLine={oneLine} - popupMatchSelectWidth + popupMatchSelectWidth={oneLine ? dropdownWidth : true} css={props.css} dropdownAlign={DROPDOWN_ALIGN_BOTTOM} {...props}