ramiroaquinoromero opened a new pull request, #36996:
URL: https://github.com/apache/superset/pull/36996
## SUMMARY
### Problem
When accessing a dashboard with multiple tabs, out-of-scope time range
filters (filters scoped to a specific tab but displayed when viewing other
tabs) were not displaying their modal correctly. The modal would either:
- Appear behind the chart/content
- Be hidden when the filter panel was collapsed
- Not be visible at all on the screen
This issue impacted version 6.x and affected user experience when trying to
edit time range filters that were outside the current tab's scope.
### Root Cause
The `getPopupContainer` callback in `DateFilterLabel.tsx` was conditionally
routing the modal to the parent node when `isOverflowingFilterBar` was true.
When the filter was inside a collapsed "Filters out of scope" panel, the
parent's CSS properties (`overflow: hidden`, `visibility: hidden`) would hide
or obscure the modal.
Additionally, the modal lacked a sufficient z-index value, causing it to
render behind charts and other page elements.
### Solution
Made two key changes to `DateFilterLabel.tsx`:
1. **Simplified `getPopupContainer` logic**: Changed from conditional parent
node selection to always use `document.body`. This positions the modal at the
top-level DOM, unaffected by parent container CSS constraints (overflow,
visibility, display).
2. **Added z-index**: Set `zIndex: 1050` in the `overlayStyle` prop,
ensuring the modal appears above charts and other content (following Ant
Design's standard modal z-index pattern).
### Changes Made
- Modified
`superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx`
- Updated `getPopupContainer` to always return `document.body`
- Added `zIndex: 1050` to `overlayStyle`
**Note**: The `isOverflowingFilterBar` prop is still used in the
`CustomFrame` component for internal DatePickers and remains necessary for that
use case.
### Technical Details
```tsx
// BEFORE
getPopupContainer={nodeTrigger =>
isOverflowingFilterBar
? (nodeTrigger.parentNode as HTMLElement)
: document.body
}
// AFTER
getPopupContainer={() =>
// Use document.body to prevent modal from being hidden by collapsed panels
document.body
}
```
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
BEFORE (Bug):
- User clicks time range filter on Tab 2 (out of scope while viewing Tab 1)
- Modal appears behind the chart or is completely hidden
- User cannot interact with the filter modal
https://github.com/user-attachments/assets/f06e705b-b1fc-4012-ac0b-67a373b53e9c
AFTER (Fixed):
- User clicks time range filter on Tab 2 (out of scope while viewing Tab 1)
- Modal displays correctly above the chart
- Modal is fully visible and interactive
- Works correctly whether the filter panel is collapsed or expanded
https://github.com/user-attachments/assets/23fde314-a231-4387-864a-dbd30009b8d0
### TESTING INSTRUCTIONS
Setup
1. Create a new dashboard
2. Add two tabs to the dashboard (Tab 1 and Tab 2)
3. Add a chart to Tab 2 that has a time range column in its dataset
4. Add a time range filter to the chart and scope it only to Tab 2
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [X] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] 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
--
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]
