rusackas opened a new pull request, #42600:
URL: https://github.com/apache/superset/pull/42600
### SUMMARY
Fixes #39339
In the **Edit Role** modal, the Permissions field's Select overflows in an
odd way once enough permissions are selected to wrap past `maxTagCount`
(default 4, since this field sets no `maxTagCount`/`oneLine` override): wrapped
rows spill outside the select's border, the dropdown arrow is vertically
mis-centered, and — worst of all — once the dropdown opens, the search input
becomes effectively invisible, with the popup overlapping the (clipped) second
row of tags instead of rendering below it.
Root cause, found by digging into the actual AntD v6 upgrade diff (#41636)
rather than guessing: that PR renamed `.ant-select-selection-overflow` (the
container holding all selected tags) to `.ant-select-content`. A CSS rule in
`Select/styles.tsx` that was only ever meant to cap the height of *individual*
tag chips and placeholder text got mechanically widened during the rename pass
to also match the renamed *container* class:
```diff
- && .ant-select-selection-item, .ant-select-selection-placeholder {
+ && .ant-select-content,
+ && .ant-select-selection-item,
+ && .ant-select-placeholder {
max-height: ${theme.sizeXL}px;
}
```
That caps the whole tag container to a single line's height regardless of
how many rows the tags actually need. Since the container uses `overflow:
visible`, wrapped rows still render — they just spill outside the box rather
than growing it, which cascades into the arrow/dropdown/search-input symptoms
above.
**Fix:** drop `.ant-select-content` from that shared rule so only individual
items get height-capped; the container is free to grow across however many rows
it needs.
Since `Select` and `AsyncSelect` share this same `styles.tsx`, this fixes it
at the root for every multi-select across the product (Role
Permissions/Users/Groups, and anywhere else affected), not just the one field
that surfaced it.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
**Before (closed):** tags wrap but spill outside the border; arrow
mis-centered.
**Before (open):** second row clipped behind the dropdown popup; no visible
way to see what you're typing.
**After (closed):** border correctly encloses both rows; arrow centered on
the full box height.
**After (open):** both rows fully visible above a correctly-positioned
dropdown; typed text visible right after the tags.
(Verified visually via a Storybook repro + Playwright screenshots
reproducing the exact reported layout at matching container width — see testing
instructions.)
### TESTING INSTRUCTIONS
- Added `ManySelectedValuesWrapping` to `Select.stories.tsx`: a 600px-wide
multi-select with 32 selected permission-style values, matching the Edit Role
modal's Permissions field. Reproduces the bug exactly pre-fix; confirms the fix
visually post-fix.
- Added a regression test, `does not cap the tag container to a single line
when tags wrap to multiple rows`, in `Select.test.tsx`. Verified it actually
catches the regression: reintroducing `.ant-select-content` into the shared
rule makes it fail with `maxHeight: 32px`; it passes with the fix.
- Full `Select.test.tsx` + `AsyncSelect.test.tsx` suites: 164/164 passing.
- `pre-commit` (oxlint, prettier, stylelint, frontend type-checking) all
pass.
### ADDITIONAL INFORMATION
- [x] Has associated issue: Fixes #39339
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
