Skip to content

Commit 808413f

Browse files
Fix TimePicker Popovers (#1312)
Ensures Date Picker and Selects under TimePicker can be accessed. ## Before When trying to click a date in the TimePicker it would close the modal (due to click outside) ## After Modal will remain open and interactive as expected Fixes HDX-2662
1 parent c6ad250 commit 808413f

File tree

2 files changed

+22
-2
lines changed

2 files changed

+22
-2
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": patch
3+
---
4+
5+
Ensure popovers inside the TimePicker component can be accessed

packages/app/src/components/TimePicker/TimePicker.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo, useState } from 'react';
22
import { add, Duration, format, sub } from 'date-fns';
33
import { useAtom } from 'jotai';
44
import { atomWithStorage } from 'jotai/utils';
@@ -180,6 +180,17 @@ export const TimePicker = ({
180180
[form.values, handleSearch],
181181
);
182182

183+
// Must be state to ensure rerenders occur when ref changes
184+
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
185+
const dateComponentPopoverProps = useMemo(
186+
() => ({
187+
portalProps: {
188+
target: containerRef ?? undefined,
189+
},
190+
}),
191+
[containerRef],
192+
);
193+
183194
const isLiveMode = value === LIVE_TAIL_TIME_QUERY;
184195

185196
return (
@@ -234,7 +245,7 @@ export const TimePicker = ({
234245
}}
235246
/>
236247
</Popover.Target>
237-
<Popover.Dropdown p={0}>
248+
<Popover.Dropdown p={0} ref={setContainerRef}>
238249
<Group justify="space-between" gap={4} px="xs" py={4}>
239250
<Group gap={4}>
240251
<Button
@@ -340,12 +351,14 @@ export const TimePicker = ({
340351
<>
341352
<H>Start time</H>
342353
<DateInputCmp
354+
popoverProps={dateComponentPopoverProps}
343355
maxDate={today}
344356
mb="xs"
345357
{...form.getInputProps('startDate')}
346358
/>
347359
<H>End time</H>
348360
<DateInputCmp
361+
popoverProps={dateComponentPopoverProps}
349362
maxDate={today}
350363
minDate={form.values.startDate ?? undefined}
351364
{...form.getInputProps('endDate')}
@@ -355,6 +368,7 @@ export const TimePicker = ({
355368
<>
356369
<H>Time</H>
357370
<DateInputCmp
371+
popoverProps={dateComponentPopoverProps}
358372
maxDate={today}
359373
mb="xs"
360374
{...form.getInputProps('startDate')}
@@ -363,6 +377,7 @@ export const TimePicker = ({
363377
<Select
364378
placeholder="Pick value"
365379
data={DURATION_OPTIONS}
380+
comboboxProps={dateComponentPopoverProps}
366381
searchable
367382
size="xs"
368383
variant="filled"

0 commit comments

Comments
 (0)