This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 4f26627a6a9 fix(native-filters): stop Date Range calendar popup from
clipping in overflow dropdown (#43978)
4f26627a6a9 is described below
commit 4f26627a6a992691597b8716406bd0db62a2eb94
Author: Kunal <[email protected]>
AuthorDate: Wed Sep 9 10:22:33 2026 +0530
fix(native-filters): stop Date Range calendar popup from clipping in
overflow dropdown (#43978)
Co-authored-by: Joe Li <[email protected]>
---
.../controls/DateFilterControl/DateFilterLabel.tsx | 6 +-----
.../DateFilterControl/components/CustomFrame.tsx | 18 +++---------------
.../DateFilterControl/tests/DateFilterLabel.test.tsx | 11 ++++-------
3 files changed, 8 insertions(+), 27 deletions(-)
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index bfd71472f6d..8ab72c13ff2 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -368,11 +368,7 @@ export default function DateFilterLabel(props:
DateFilterControlProps) {
onOpenChange={toggleOverlay}
overlayStyle={{ width: 'min(600px, calc(100vw - 32px))' }}
destroyOnHidden
- getPopupContainer={nodeTrigger =>
- isOverflowingFilterBar
- ? (nodeTrigger.parentNode as HTMLElement)
- : document.body
- }
+ getPopupContainer={() => document.body}
overlayClassName="time-range-popover"
>
<Tooltip
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index e2e0ccf61be..d849fe4d93c 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -142,11 +142,7 @@ export function CustomFrame(props: FrameComponentProps) {
onChange('sinceDatetime', datetime.format(DAYJS_FORMAT))
}
allowClear={false}
- getPopupContainer={(triggerNode: HTMLElement) =>
- props.isOverflowingFilterBar
- ? (triggerNode.parentNode as HTMLElement)
- : document.body
- }
+ getPopupContainer={() => document.body}
/>
</Row>
)}
@@ -201,11 +197,7 @@ export function CustomFrame(props: FrameComponentProps) {
onChange('untilDatetime', datetime.format(DAYJS_FORMAT))
}
allowClear={false}
- getPopupContainer={(triggerNode: HTMLElement) =>
- props.isOverflowingFilterBar
- ? (triggerNode.parentNode as HTMLElement)
- : document.body
- }
+ getPopupContainer={() => document.body}
/>
</Row>
)}
@@ -262,11 +254,7 @@ export function CustomFrame(props: FrameComponentProps) {
}
allowClear={false}
className="control-anchor-to-datetime"
- getPopupContainer={(triggerNode: HTMLElement) =>
- props.isOverflowingFilterBar
- ? (triggerNode.parentNode as HTMLElement)
- : document.body
- }
+ getPopupContainer={() => document.body}
/>
</Col>
)}
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
index 72dc40d9682..15cb3161523 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
@@ -163,15 +163,14 @@ test('DateFilter popover shifts into the viewport', async
() => {
});
});
-test('DateFilter popover should attach to parent node when overflowing in
filter bar', () => {
+test('DateFilter popover should attach to document.body even when overflowing
in filter bar', () => {
render(setup({ ...defaultProps, isOverflowingFilterBar: true }));
userEvent.click(screen.getByText(NO_TIME_RANGE));
const popover = document.querySelector<HTMLElement>('.time-range-popover');
- const trigger = screen.getByTestId(DateFilterTestKey.PopoverOverlay);
- expect(popover?.parentElement).toBe(trigger.parentElement);
+ expect(popover?.parentElement).toBe(document.body);
expect(popover).toHaveStyle({
width: 'min(600px, calc(100vw - 32px))',
});
@@ -189,15 +188,13 @@ test('DateFilter should properly handle
isOverflowingFilterBar prop changes', ()
userEvent.click(screen.getByText('Cancel'));
- // When overflowing, popover should attach to parent node
+ // Popover should continue to attach to document.body even when overflowing
rerender(setup({ ...defaultProps, isOverflowingFilterBar: true }));
userEvent.click(screen.getByText(NO_TIME_RANGE));
const popoverAfterRerender = document.querySelector('.time-range-popover');
- const trigger = screen.getByTestId(DateFilterTestKey.PopoverOverlay);
- expect(popoverAfterRerender?.parentElement).toBe(trigger.parentElement);
- expect(popoverAfterRerender?.parentElement).not.toBe(document.body);
+ expect(popoverAfterRerender?.parentElement).toBe(document.body);
});
test('hovering the description icon does not show the date range tooltip',
async () => {
