(superset) branch alexandrusoare/fix/dropdown-width created (now 97d27303f52)

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

asoare pushed a change to branch alexandrusoare/fix/dropdown-width
in repository https://gitbox.apache.org/repos/asf/superset.git


      at 97d27303f52 fix(popup): fixing popup width

This branch includes the following new commits:

     new 97d27303f52 fix(popup): fixing popup width

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: fix(popup): fixing popup width

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

asoare pushed a commit to branch alexandrusoare/fix/dropdown-width
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 97d27303f52852aaacdc21b9d6eafe6e0874096b
Author: alexandrusoare <al...@gmail.com>
AuthorDate: Mon Apr 6 14:01:06 2026 +0300

    fix(popup): fixing popup width
---
 .../src/components/Select/Select.test.tsx          | 42 ++++++++++++++++++++++
 .../src/components/Select/Select.tsx               | 21 +++++++++--
 2 files changed, 61 insertions(+), 2 deletions(-)

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 6b89561627a..4aa9f9daac4 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
@@ -811,6 +811,48 @@ 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(
+    <div style={{ width: '300px' }}>
+      <Select
+        {...defaultProps}
+        value={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
+        mode="multiple"
+        oneLine
+      />
+    </div>,
+  );
+
+  await open();
+
+  // Wait for RAF to complete and tags to collapse
+  await waitFor(() => {
+    const withinSelector = within(
+      getElementByClassName('.ant-select-selector'),
+    );
+    expect(
+      withinSelector.queryByText(OPTIONS[0].label),
+    ).not.toBeInTheDocument();
+    expect(withinSelector.getByText('+ 3 ...')).toBeVisible();
+  });
+
+  const selectElement = document.querySelector('.ant-select') as HTMLElement;
+  const dropdown = document.querySelector(
+    '.ant-select-dropdown',
+  ) as HTMLElement;
+
+  expect(selectElement).toBeInTheDocument();
+  expect(dropdown).toBeInTheDocument();
+
+  // The dropdown width should match the collapsed input width
+  const selectWidth = selectElement.getBoundingClientRect().width;
+  const dropdownWidth = dropdown.getBoundingClientRect().width;
+
+  // In oneLine mode with tags, dropdown width should match input width
+  // Allow small tolerance for sub-pixel differences
+  expect(Math.abs(dropdownWidth - selectWidth)).toBeLessThanOrEqual(1);
+});
+
 test('does not render "Select all" when there are 0 or 1 options', async () => {
   const { rerender } = render(
     <Select {...defaultProps} options={[]} mode="multiple" allowNewOptions />,
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 3f5d9cf4bf8..fc0df73f9d6 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<HTMLDivElement>(null);
+    const [dropdownWidth, setDropdownWidth] = useState<number | true>(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 (
-      <StyledContainer className={className} headerPosition={headerPosition}>
+      <StyledContainer
+        ref={selectContainerRef}
+        className={className}
+        headerPosition={headerPosition}
+      >
         {header && (
           <StyledHeader headerPosition={headerPosition}>{header}</StyledHeader>
         )}
@@ -777,7 +794,7 @@ const Select = forwardRef(
           options={visibleOptions}
           optionRender={option => <Space>{option.label || option.value}</Space>}
           oneLine={oneLine}
-          popupMatchSelectWidth
+          popupMatchSelectWidth={oneLine ? dropdownWidth : true}
           css={props.css}
           dropdownAlign={DROPDOWN_ALIGN_BOTTOM}
           {...props}