This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch fix-filter-dropdown-disappearing in repository https://gitbox.apache.org/repos/asf/superset.git
commit 603a680fc5baa1f30ca019f46dfedccdad78240a Author: Evan Rusackas <[email protected]> AuthorDate: Mon Feb 23 09:42:14 2026 -0800 fix(dashboard): prevent filter dropdown button from disappearing during layout recalculations Add `alwaysShowDropdownButton` prop to DropdownContainer to keep the dropdown button visible even when no items are overflowing. This prevents the button from flickering/disappearing when the filter bar recalculates layout, which caused a confusing UX where users would lose access to overflowed filters momentarily. Co-Authored-By: Claude Opus 4.6 <[email protected]> --- .../DropdownContainer/DropdownContainer.test.tsx | 19 +++++++++++++++++++ .../DropdownContainer/DropdownContainer.tsx | 3 ++- .../src/components/DropdownContainer/types.ts | 5 +++++ .../FilterBar/FilterControls/FilterControls.tsx | 1 + 4 files changed, 27 insertions(+), 1 deletion(-) diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx index f46b151c7a3..edbbcd7cea9 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.test.tsx @@ -158,6 +158,25 @@ test('accepts custom style props', () => { expect(container).toHaveStyle('padding: 10px'); }); +test('shows dropdown button when alwaysShowDropdownButton is true even without overflow', () => { + render( + <DropdownContainer items={generateItems(3)} alwaysShowDropdownButton />, + ); + expect(screen.getByTestId('dropdown-container-btn')).toBeInTheDocument(); +}); + +test('does not show dropdown button when alwaysShowDropdownButton is false and not overflowing', () => { + render( + <DropdownContainer + items={generateItems(3)} + alwaysShowDropdownButton={false} + />, + ); + expect( + screen.queryByTestId('dropdown-container-btn'), + ).not.toBeInTheDocument(); +}); + // Integration test that doesn't rely on specific overflow behavior test('component renders and functions without throwing errors', () => { const onOverflowingStateChange = jest.fn(); diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx index 14df91f4cf1..1c2aecff623 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx @@ -53,6 +53,7 @@ export const DropdownContainer = forwardRef( dropdownTriggerTooltip = null, forceRender, style, + alwaysShowDropdownButton, }: DropdownContainerProps, outerRef: RefObject<DropdownRef>, ) => { @@ -314,7 +315,7 @@ export const DropdownContainer = forwardRef( > {notOverflowedItems.map(item => item.element)} </div> - {popoverContent && ( + {(popoverContent || alwaysShowDropdownButton) && ( <> <Global styles={css` diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts index a7150ffabf9..599f5876db5 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts +++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts @@ -87,6 +87,11 @@ export interface DropdownContainerProps { * Force render popover content before it's first opened */ forceRender?: boolean; + /** + * Always show the dropdown button, even when no items are overflowing. + * Useful to prevent button flickering during layout recalculations. + */ + alwaysShowDropdownButton?: boolean; } export type DropdownRef = HTMLDivElement & { open: () => void }; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index 49ebc4b5866..c13cbc8f8be 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -625,6 +625,7 @@ const FilterControls: FC<FilterControlsProps> = ({ : undefined } forceRender={hasRequiredFirst} + alwaysShowDropdownButton={items.length > 0} ref={popoverRef} onOverflowingStateChange={({ overflowed: nextOverflowedIds }) => { if (
