FrancescoCastaldi opened a new pull request, #45051:
URL: https://github.com/apache/superset/pull/45051
### SUMMARY
Fixes an issue where native filters in the horizontal filter bar vanish
after selecting a table cross-filter when one of the native filters has
`requiredFirst` enabled (and other filters such as Date range have a default
value).
#### Root Cause
In `FilterControls.tsx`, `hasRequiredFirst` was passed as
`forceRender={hasRequiredFirst}` to `<DropdownContainer>`. `DropdownContainer`
forwards `forceRender` to Ant Design's `<Popover>`.
When `forceRender` is `true`, Ant Design mounts the popover content into the
DOM even while closed (`open={false}`). When a cross-filter is selected, a new
chip is added to the horizontal bar, causing `DropdownContainer` to trigger a
transient layout re-measurement. During this re-measurement frame, the popover
content is mounted in the hidden popover DOM.
Because native filters use `react-reverse-portal` (`<OutPortal>`), which can
only anchor a portal node to a single DOM location, the hidden Popover stole
the portal nodes from the visible horizontal row. This caused the native
filters in the horizontal bar to collapse to 0px, tricking the container
measurement into concluding that all items fit, unmounting the popover button
and detaching the portal nodes without restoring them in the main bar.
#### Solution
Removed `forceRender={hasRequiredFirst}` from `<DropdownContainer>` in
`FilterControls.tsx`. Closed overflow popovers should not force-render reverse
portals in hidden DOM. Documented this constraint in `DropdownContainer` props.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
N/A
### TESTING INSTRUCTIONS
1. Create a dashboard with horizontal filter bar orientation.
2. Add a Date Range native filter with a default value.
3. Add a Select native filter with "Required first" enabled.
4. Add a table chart with cross-filtering enabled.
5. Apply a cross-filter by clicking on a row in the table chart.
6. Observe that native filters in the horizontal bar remain visible and
interactive instead of disappearing.
7. Run unit test suite: `npm test -- FilterControls.overflow.test.tsx`.
### ADDITIONAL INFORMATION
- [x] Has associated issue: Fixes #45050
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration
- [ ] 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]
