fix(select): ensure filter dropdown matches input field width

[EnxDev]

User description

SUMMARY

Summary
Fixed filter dropdown not matching the full width of the input field when selectAllEnabled is true ans
Reverts the popupMatchSelectWidth change from #37453, which hardcoded the dropdown width to 168px to prevent bulk action buttons from being cut off, but introduced a regression where the dropdown is narrower than the input field.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

• Before

• After

• After

• After

• After

TESTING INSTRUCTIONS

1. Open a dashboard with a multi-select filter
2. Click on the filter and type to search
3. Verify the dropdown options panel is the same width as the input field above it
4. Verify the "Select all" / "Clear" buttons in the dropdown are not cut off

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • 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

---

CodeAnt-AI Description

Make select dropdown match the input width

What Changed

• The filter dropdown now stretches to the full width of the select field instead of using a narrower fixed width in multi-select mode
• Single-select and multi-select dropdowns now follow the same width behavior
• Added checks to prevent the dropdown width from shrinking again

Impact

✅ Dropdown matches the filter field
✅ Fewer clipped bulk action buttons
✅ More consistent select menus

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[bito-code-review]

Code Review Agent Run #9ef09c

Actionable Suggestions - 0

Additional Suggestions - 1

• superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx - 1

  • UI Layout Risk: Select All Button Width · Line 780-780
    Removing the conditional width (168px when selectAllEnabled) may cause the 'Select all (count)' button to overflow or wrap in narrow dropdowns, as the button text can exceed the select input width. The original logic set a minimum width for selectAll scenarios.

Review Details

• Files reviewed - 1 · Commit Range: c7f399c..c7f399c

  • superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codeant-ai-for-open-source]

Sequence Diagram

This PR updates the filter select component so that the dropdown menu always matches the input field width, even when bulk selection is enabled, restoring a full-width, unclipped dropdown.

sequenceDiagram
    participant User
    participant FilterUI
    participant SelectComponent
    participant DropdownMenu

    User->>FilterUI: Click filter select input
    FilterUI->>SelectComponent: Open dropdown
    SelectComponent->>DropdownMenu: Render matching input width
    DropdownMenu-->>User: Show full-width options and bulk actions

Loading

---

Generated by CodeAnt AI

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	84bfdfc
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69c67d7153a819000807c71c
😎 Deploy Preview	https://deploy-preview-38886--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[bito-code-review]

Code Review Agent Run #940450

Actionable Suggestions - 0

Additional Suggestions - 1

• superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx - 1

  • Incomplete test assertions for width matching · Line 918-948
    The tests check that no fixed inline width is set on the dropdown, but to fully assert the behavior that the dropdown takes the full width of the select input, add checks for actual width matching using offsetWidth.
    Code suggestion

     @@ -928,1 +928,4 @@
    -  expect(dropdown).toBeInTheDocument();
    +  expect(dropdown).toBeInTheDocument();
    +  const select = document.querySelector('.ant-select-selector') as HTMLElement;
    +  expect(dropdown.offsetWidth).toBe(select.offsetWidth);
     @@ -945,1 +948,4 @@
    -  expect(dropdown).toBeInTheDocument();
    +  expect(dropdown).toBeInTheDocument();
    +  const select = document.querySelector('.ant-select-selector') as HTMLElement;
    +  expect(dropdown.offsetWidth).toBe(select.offsetWidth);

Review Details

• Files reviewed - 1 · Commit Range: c7f399c..3b98a2c

  • superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[github-actions]

🎪 Showtime is building environment on GHA for 84bfdfc

[github-actions]

🎪 Showtime deployed environment on GHA for 84bfdfc

• Environment: http://34.219.244.42:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[michaelmorera-preset]

The testing for this task was completed. The application is working as expected.

Scenario

Verify the dropdown width is the correct in relation with the input field.

Variants

Visual Variant	Status
Existing dashboard - Horizontal	✅
Existing dashboard - Vertical	✅
New dashboard - Horizontal	✅
New dashboard - Vertical	✅
“Select all” / “Clear”	⚠️

NOTE: “Select all” / “Clear” options are cut off when the user clicks on them.

Functional Variant	Status
Existing dashboard - Horizontal	✅
Existing dashboard - Vertical	✅
New dashboard - Horizontal	✅
New dashboard - Vertical	✅
“Select all” / “Clear”	✅

Steps

1. Open the Superset app and sign in with a user who can edit or view dashboards (and the target dataset).
2. Open or create a dashboard that uses dashboard-native filters (not only chart filters).
3. If the dashboard does not already have a multi-select filter:
   1. Enter Edit mode on the dashboard.
   2. Open the Filters configuration (dashboard filter bar / “Add and edit filters”).
   3. Add a filter, pick a column suitable for many values (e.g. a category or text field from a dataset on the dashboard, similar in spirit to dimensions on public.cleaned_sales_data if you use that).
   4. Set the filter control type so values allow multiple selections (e.g. multi-value / multi-select — wording depends on your Superset version: “Filter value” with multiple values allowed, or explicit multi-select).
   5. Save the filter and Save the dashboard.
4. Leave Edit mode if needed and load the dashboard so the filter bar is visible.
5. In the filter bar, click the multi-select filter so the control is focused and the value dropdown opens.
6. Type a few characters in the search box inside the dropdown (search that narrows the option list, e.g. part of a known dimension value).
7. Visually compare widths: With the dropdown open (while searching is fine), check that the dropdown panel (the floating list + search + footer) is the same width as the filter input/trigger above it — not clearly narrower or wider (allow a pixel or two from rounding/borders if you see something tiny).
8. Scroll if the list is long: Scroll the option list so the bottom of the panel is visible.
9. Check that “Select all” and Clear (or your build’s equivalent labels) in the dropdown footer are fully visible: not clipped by the panel edge, not hidden behind scrollbars, and not overflowing outside the panel.

Current result

After searching in the multi-select filter, the dropdown panel width matches the filter control width, and the “Select all” / “Clear” actions in the dropdown remain fully visible and usable (not cut off).

Evidence

“Select all” / “Clear”

Dashboard Filter

[alexandrusoare]

LGTM

[EnxDev]

“Select all” / “Clear” ⚠️

Hi @michaelmorera-preset, related this, is it the same on master.
We can fix it in another PR, thanks for your check!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.51%. Comparing base (89f7e5e) to head (32fba13).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #38886      +/-   ##
==========================================
- Coverage   64.51%   64.51%   -0.01%     
==========================================
  Files        2536     2536              
  Lines      130785   130784       -1     
  Branches    30349    30348       -1     
==========================================
- Hits        84382    84377       -5     
- Misses      44940    44944       +4     
  Partials     1463     1463              

Flag	Coverage Δ
javascript	65.82% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[bito-code-review]

Bito Automatic Review Skipped – PR Already Merged

Bito scheduled an automatic review for this pull request, but the review was skipped because this PR was merged before the review could be run.
No action is needed if you didn't intend to review it. To get a review, you can type /review in a comment and save it