FrancescoCastaldi commented on issue #45050:
URL: https://github.com/apache/superset/issues/45050#issuecomment-6038165458
Hi @lyndagolomb,
Thank you for the detailed reproduction steps and bisecting notes.
Your analysis was spot on regarding `requiredFirst`. Here is the exact
mechanism that was causing the native filters to vanish:
1. In `FilterControls.tsx`, `hasRequiredFirst` was being passed down as
`forceRender={hasRequiredFirst}` to `<DropdownContainer>`, which in turn
forwarded it to Ant Design's `<Popover forceRender={forceRender}>`.
2. Ant Design's `Popover` with `forceRender={true}` mounts its content into
the DOM even while closed (`open={false}`).
3. When you clicked a row in the table chart, a new cross-filter chip was
emitted, causing the item list to grow. This triggered a transient
re-measurement frame inside `DropdownContainer` where `overflowingCount > 0`.
4. During that transient frame, the closed popover mounted its content. In
Superset, native filters are rendered using `react-reverse-portal`
(`<OutPortal>`). A reverse-portal node can only be anchored to a single DOM
node at any given time.
5. The hidden Popover's `<OutPortal>` stole the filter elements from the
visible horizontal row. This caused the native filter elements in the main row
to collapse to 0px width.
6. On the next layout frame, `DropdownContainer` measured the container
width: because the native filters had collapsed to 0px, all items appeared to
fit (`index === -1`). It set `overflowingCount = 0` and unmounted the "More
filters" button, destroying the popover and leaving the portal nodes detached
without re-attaching them to the main row.
7. On a full browser refresh, the component mounted in steady-state with
both the cross-filter chip and the native filters already present, which is why
they reappeared.
I have submitted a comprehensive fix in PR
[#45051](https://github.com/apache/superset/pull/45051):
- Removed `forceRender={hasRequiredFirst}` from `<DropdownContainer>` in
`FilterControls.tsx`, ensuring closed overflow popovers never force-mount
reverse-portal nodes into hidden DOM.
- Added regression and integration unit tests covering your exact setup
(Account with `requiredFirst`, Date range with default, and emitted
cross-filter) in `FilterControls.overflow.test.tsx` and
`DropdownContainer.test.tsx`.
If you have a local dev or test container environment, you can test the fix
directly from branch
`FrancescoCastaldi:fix/issue-45050-horizontal-filterbar-crossfilter`.
--
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]
