fix(select): remove Space wrapper from optionRender to fix option label truncation

[piyushraj001]

SUMMARY

The optionRender prop in both Select and AsyncSelect was wrapping option labels in antd's <Space> component (a flex container). This broke the antd native overflow model for .ant-select-item-option-content, causing long text labels to be clipped/cut off in dropdown filters (e.g., game names in a Games filter).

Removing the unnecessary <Space> wrapper allows antd to handle option label rendering natively, restoring the correct text-overflow behavior that existed in 6.0.

Fixes #44350

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

TESTING INSTRUCTIONS

1. Open a dashboard with a native filter that has long option values.
2. Click the filter dropdown.
3. Verify that long option names are no longer cut off.
4. Run the following unit tests:

npx jest --testPathPatterns="packages/superset-ui-core/src/components/Select/Select.test" --watchAll=false
npx jest --testPathPatterns="packages/superset-ui-core/src/components/Select/AsyncSelect.test" --watchAll=false

ADDITIONAL INFORMATION

• Has associated issue: Fixes Game name is cut off in Games filter in Superset v6.1 #44350
• Required feature flags:
• Changes UI
• Includes DB Migration
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #7accd6

Actionable Suggestions - 0

Review Details

• Files reviewed - 2 · Commit Range: 49dbe09..49dbe09

  • superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.tsx
  • 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 an incremental AI Review.

• /review full - 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

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	0fc5c7b
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/6abefd810ca21d0008398f52
😎 Deploy Preview	https://deploy-preview-44357--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.81%. Comparing base (1315f5f) to head (49dbe09).
⚠️ Report is 289 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #44357      +/-   ##
==========================================
- Coverage   79.81%   79.81%   -0.01%     
==========================================
  Files        2913     2913              
  Lines      170313   170313              
  Branches    39480    39480              
==========================================
- Hits       135932   135929       -3     
- Misses      31859    31862       +3     
  Partials     2522     2522              

Flag	Coverage Δ
javascript	75.34% <100.00%> (-0.01%)	⬇️

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

☔ View full report in Codecov by Harness.
📢 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.

[gabotorresruiz]

Hi @piyushraj001, thanks for the fix, and good catch on the root cause.

I verified this on 49dbe09 rather than only reading the diff. Rendering the dropdown and dumping the option markup:

• On master: .ant-select-item-option-content > div.ant-space.ant-space-horizontal > div.ant-space-item, so the label lives inside an inline-flex box and the text-overflow: ellipsis antd puts on .ant-select-item-option-content never gets a chance to apply.
• On this branch: the label is a direct text child of .ant-select-item-option-content, and the title attribute antd sets on .ant-select-item is unchanged, so the full value is still reachable on hover.
• Selected tag markup (.ant-select-selection-item) is identical before and after, so multi select is untouched. optionRender only feeds the dropdown list.

I also swept the callers that pass a non string label into Select / AsyncSelect: TableOption (src/components/TableSelector/index.tsx:116), SelectLabel (src/components/DatabaseSelector/index.tsx:153) and ColorSchemeLabel each bring their own display: flex wrapper with their own icon margins and ellipsis rules, so none of them were leaning on the Space gap. The only caller supplied optionRender in the tree (the two in FiltersConfigForm.tsx) wraps in a plain <span>, which does not break the ellipsis. So I could not find a regression.

Not a blocker, but please add a test

Nothing pins this today, so the Space wrapper can come back in the next refactor and CI will stay green. jsdom cannot measure layout, but it can pin the DOM contract that makes the ellipsis possible. I ran this against both states: it passes on your branch and fails on master with Received: <div class="ant-space ...">.

test('renders the option label directly in the option content', async () => {
  render(<Select {...defaultProps} />);
  await open();
  const content = getElementByClassName('.ant-select-item-option-content');
  expect(content.querySelector('.ant-space')).toBeNull();
  expect(content.firstChild?.nodeType).toBe(Node.TEXT_NODE);
});

defaultProps, open and getElementByClassName already exist in both Select.test.tsx and AsyncSelect.test.tsx, so it drops straight in on both sides.

Just a small NIT

Dropping the import left a stray empty line inside the import block in both files (Select.tsx:78 and AsyncSelect.tsx:48). Worth removing so the diff is only the two optionRender lines.

[piyushraj001]

Thanks @gabotorresruiz for the detailed review and for verifying it manually!

Added the regression test to both Select.test.tsx and AsyncSelect.test.tsx as suggested — it pins the DOM contract by asserting no .ant-space wrapper and that the first child is a text node. Also cleaned up the stray empty lines in the import blocks.

[gabotorresruiz]

LGTM, re-approving so the approval covers 72aaaef.

The force push did not rebase anything: 49dbe09 and 72aaaef share the same parent 1315f5ff6b, and the two source blobs are byte identical to the ones I approved (Select.tsx at 3650750beb60, AsyncSelect.tsx at 5107b48751e7). The whole tree is identical apart from the two test files, so nothing in the fix itself needed re-verifying.

I did run the new tests both ways rather than take them on trust:

• Against the current Select.tsx / AsyncSelect.tsx both pass, three runs in a row.
• Against the pre-fix source both fail with Received: <div class="ant-space ant-space-horizontal ...">, so they pin the fix itself and not just an invariant that would have held anyway.

Two notes, neither blocking:

• The stray empty lines are still on the branch (Select.tsx:78 and AsyncSelect.tsx:48), so that part did not make it into the amend.
• The merge is blocked because every workflow run on 72aaaef is sitting in action_required. The force push reset the workflow approval gate, so none of the required checks have started. A committer needs to approve the runs, nothing for you to fix.

[piyushraj001]

@gabotorresruiz Fixed the stray empty lines in both Select.tsx and AsyncSelect.tsx. All set on my end — will wait for a committer to approve the workflow runs.

[bito-code-review]

Code Review Agent Run #0ce5c1

Actionable Suggestions - 0

Review Details

• Files reviewed - 4 · Commit Range: 382befa..382befa

  • superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.test.tsx
  • superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.tsx
  • superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx
  • 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 an incremental AI Review.

• /review full - 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

[gabotorresruiz]

LGTM, re-approving so the approval covers 382befa.

This push does touch the two components, so I did not lean on blob identity the way I did last time. git diff --ignore-blank-lines 72aaaef 382befa is empty and the only change is the two empty lines coming out of the import blocks. To confirm that is really a no-op I rendered the Select.tsx and AsyncSelect.tsx bytes from 72aaaef and from 382befa side by side in one jest run and dumped the option markup: character for character identical, 351 chars for Select and 295 for AsyncSelect, with no ant-space in either, while the same render off master still has it.

I also ran the two new tests against the real 382befa sources this time instead of simulating the fix. Both pass there, and both fail against the pre-fix sources with Received: <div class="ant-space ant-space-horizontal ...">.

Thanks for picking up the import block cleanup, that landed.

On CI: the workflow approval gate did clear, the runs on 382befa came back as attempt 2 rather than action_required. They then sat queued for roughly 25 hours and every one of them was cancelled on 2026-09-19 around 21:35 UTC, seconds after finally starting, so no required check ever reported and the PR is still BLOCKED. Nothing for you to fix on your side, it needs a re-run rather than another approval.

[piyushraj001]

Thanks @gabotorresruiz for the thorough re-verification!

Understood on CI — the cancellations were infra-side and unrelated to the changes. Everything on our end is ready.

@geido Could you please trigger a re-run of the CI checks on 382befa? The runs were cancelled server-side after being queued for ~25 hours, and no code changes are needed.

[codeant-ai-for-open-source]

Suggestion: Async options with an explicit falsy label such as 0, false, or an empty string display option.value instead, changing the documented ReactNode label behavior.

Assessment: 🟠 Major · 🔁 Occurrence: Rarely · 🏷️ Incorrect condition logic

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.tsx
**Line:** 906:906
**Comment:**
	*Incorrect Condition Logic: Async options with an explicit falsy label such as `0`, `false`, or an empty string display `option.value` instead, changing the documented ReactNode label behavior.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[codeant-ai-for-open-source]

Suggestion: An explicit falsy label such as 0, false, or an empty string is replaced by option.value, changing the documented ReactNode label behavior.

Assessment: 🟠 Major · 🔁 Occurrence: Rarely · 🏷️ Incorrect condition logic

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx
**Line:** 1057:1057
**Comment:**
	*Incorrect Condition Logic: An explicit falsy label such as `0`, `false`, or an empty string is replaced by `option.value`, changing the documented ReactNode label behavior.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[rusackas]

Rebased onto current master (this branch was ~735 commits stale) — clean rebase, no conflicts, diff unchanged. The failing checks were stale/cancelled CI runs from the old commit, not a real issue with the fix itself (confirmed: 0 actionable Bito findings, no open review threads, reviewer had already manually verified the fix multiple times). Approved the gated workflow runs on the fresh push and CI is now fully green. Ready to merge.

[bito-code-review]

Code Review Agent Run #175aae

Actionable Suggestions - 0

Review Details

• Files reviewed - 4 · Commit Range: 0fc5c7b..0fc5c7b

  • superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.test.tsx
  • superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.tsx
  • superset-frontend/packages/superset-ui-core/src/components/Select/Select.test.tsx
  • 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 an incremental AI Review.

• /review full - 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