fix(dashboard): prevent filter dropdown button from disappearing during layout recalculations

[rusackas]

SUMMARY

When the dashboard filter bar recalculates its layout (e.g., on resize or filter changes), the dropdown "More" button can momentarily disappear and reappear. This happens because the DropdownContainer hides the button when popoverContent is empty — which occurs briefly during re-renders before overflow detection runs.

This PR adds an alwaysShowDropdownButton prop to DropdownContainer that keeps the button visible even when no items are currently overflowing. The FilterControls component passes this prop when there are filter items, preventing the flickering behavior.

Changes:

• Added alwaysShowDropdownButton prop to DropdownContainerProps type
• Updated DropdownContainer render logic to show the button when the new prop is set
• Passed alwaysShowDropdownButton={items.length > 0} in FilterControls
• Added unit tests for the new prop

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: The dropdown button briefly disappears during layout recalculations, causing a jarring flicker.
After: The dropdown button remains stable and visible at all times when filters are present.

TESTING INSTRUCTIONS

1. Open a dashboard with enough native filters that some overflow into the "More" dropdown
2. Resize the browser window or toggle filter visibility
3. Observe that the dropdown button no longer flickers/disappears during layout recalculations

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

🤖 Generated with Claude Code

[bito-code-review]

Code Review Agent Run #6c1742

Actionable Suggestions - 0

Additional Suggestions - 1

• superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx - 1

  • Dropdown button shown with empty content · Line 628-628
    The alwaysShowDropdownButton prop set to items.length > 0 can display a dropdown button with no content when filters exist but no out-of-scope filters or overflowed items are present. This creates a poor UX with a non-functional button. Consider changing to showCollapsePanel || showCustomizationCollapsePanel to only show the button when collapsible content is available.
    Code suggestion

     @@ -628,1 +628,1 @@
    -          alwaysShowDropdownButton={items.length > 0}
    +          alwaysShowDropdownButton={showCollapsePanel || showCustomizationCollapsePanel}

Review Details

• Files reviewed - 4 · Commit Range: 603a680..603a680

  • superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx
  • superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx
  • superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts
  • superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful
  • Eslint (Linter) - ✔︎ 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