(superset) branch master updated: fix(select): don't cap multi-row tag container to single-line height (#42600)

[ru...@apache.org]

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

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 4b3801a4477 fix(select): don't cap multi-row tag container to single-line height (#42600)
4b3801a4477 is described below

commit 4b3801a44776fd5a26fa0ca016d30100a1879068
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Thu Jul 30 12:32:34 2026 -0700

    fix(select): don't cap multi-row tag container to single-line height (#42600)
    
    Co-authored-by: Claude Code <no...@anthropic.com>
---
 .../src/components/Select/Select.stories.tsx       | 40 ++++++++++++++++++++++
 .../src/components/Select/Select.test.tsx          | 22 ++++++++++++
 .../src/components/Select/styles.tsx               |  1 -
 3 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
index d2f79ce9d6d..238f9c5edee 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx
@@ -338,6 +338,46 @@ AtEveryCorner.parameters = {
   },
 };
 
+const manyPermissionLabels = [
+  'can read SavedQuery',
+  'can write SavedQuery',
+  'can read Database',
+  'can read Query',
+  'can activate TabStateView',
+  'can copy clipboard Superset',
+  'can csv Superset',
+  'can delete query TabStateView',
+  'can delete TableSchemaView',
+  'can delete TabStateView',
+  'can estimate query cost SQLLab',
+  'can execute sql query SQLLab',
+];
+const manyPermissionOptions = Array.from({ length: 32 }, (_, i) => ({
+  label:
+    manyPermissionLabels[i % manyPermissionLabels.length] +
+    (i >= manyPermissionLabels.length ? ` ${i}` : ''),
+  value: `perm_${i}`,
+}));
+
+/**
+ * Regression coverage for a narrow container where selected tags wrap to
+ * multiple rows (e.g. the Role edit modal's Permissions field, which has no
+ * `maxTagCount` override and defaults to wrapping at 4 tags per row). See
+ * https://github.com/apache/superset/issues/39339.
+ */
+export const ManySelectedValuesWrapping = () => (
+  <div style={{ width: 600 }}>
+    <Select
+      ariaLabel="many-selected-values-select"
+      mode="multiple"
+      showSearch
+      options={manyPermissionOptions}
+      value={manyPermissionOptions.map(o => o.value)}
+      getPopupContainer={trigger => trigger.parentElement as HTMLElement}
+    />
+  </div>
+);
+
 export const PageScroll = () => (
   <div style={{ height: 2000, overflowY: 'auto' }}>
     <div
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 d0e70e1df34..5bd73e8d002 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
@@ -898,6 +898,28 @@ test('Renders only an overflow tag if dropdown is open in oneLine mode', async (
   expect(withinSelector.getByText('+ 2 ...')).toBeVisible();
 });
 
+// Regression test for the bug described in: https://github.com/apache/superset/issues/39339
+// The AntD v6 upgrade renamed `.ant-select-selection-overflow` (the tag
+// container) to `.ant-select-content`, and a CSS rule meant only to cap the
+// height of individual tags/placeholder text was mistakenly widened to also
+// match the renamed container class. That capped the whole multi-row tag
+// container to a single line's height, so wrapped rows spilled outside the
+// select's border, the dropdown arrow mis-centered against the wrong height,
+// and the search input (rendered last in the wrapped row) became invisible
+// once the dropdown opened.
+test('does not cap the tag container to a single line when tags wrap to multiple rows', () => {
+  render(
+    <Select
+      {...defaultProps}
+      value={OPTIONS.slice(0, 8)}
+      mode="multiple"
+      maxTagCount={6}
+    />,
+  );
+  const content = getElementByClassName('.ant-select-content');
+  expect(content).not.toHaveStyle({ maxHeight: '32px' });
+});
+
 // Test for checking the issue described in: https://github.com/apache/superset/issues/35132
 test('Maintains stable maxTagCount to prevent click target disappearing in oneLine mode', async () => {
   render(
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
index 1fb424bcf2c..0c6f9294013 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
@@ -58,7 +58,6 @@ export const StyledSelect = styled(Select, {
       left: 0px;
     }
 
-    && .ant-select-content,
     && .ant-select-selection-item,
     && .ant-select-placeholder {
       max-height: ${theme.sizeXL}px;