fix(RelativeRangeDatePicker): correctly close picker popup inside dialog (#117)

ValeraS · web-flow · commit f1229508a909 · 2024-07-16T15:36:11.000+02:00
diff --git a/src/components/DatePicker/hooks/useDatePickerProps.ts b/src/components/DatePicker/hooks/useDatePickerProps.ts
@@ -78,7 +78,7 @@ export function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(
 
     function focusInput() {
         setTimeout(() => {
-            inputRef.current?.focus();
+            inputRef.current?.focus({preventScroll: true});
         });
     }
 
diff --git a/src/components/RelativeDatePicker/RelativeDatePicker.tsx b/src/components/RelativeDatePicker/RelativeDatePicker.tsx
@@ -7,7 +7,7 @@ import {
     Clock as ClockIcon,
     Function as FunctionIcon,
 } from '@gravity-ui/icons';
-import {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';
+import {Button, Icon, Popup, TextInput, useForkRef, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import {Calendar} from '../Calendar';
@@ -62,12 +62,13 @@ export function RelativeDatePicker(props: RelativeDatePickerProps) {
     } = useRelativeDatePickerProps(state, props);
 
     const anchorRef = React.useRef<HTMLDivElement>(null);
+    const handleRef = useForkRef(anchorRef, groupProps.ref);
 
     const isMobile = useMobile();
     const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
 
     return (
-        <div ref={anchorRef} className={b(null, props.className)} {...groupProps}>
+        <div {...groupProps} ref={handleRef} className={b(null, props.className)}>
             {isMobile && state.mode === 'absolute' && (
                 <MobileCalendar
                     state={state.datePickerState}
diff --git a/src/components/RelativeDatePicker/__stories__/RelativeDatePicker.stories.tsx b/src/components/RelativeDatePicker/__stories__/RelativeDatePicker.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {dateTimeParse} from '@gravity-ui/date-utils';
-import {Tabs, useControlledState} from '@gravity-ui/uikit';
+import {Button, Dialog, Tabs, useControlledState} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
@@ -10,6 +10,7 @@ import {timeZoneControl} from '../../../demo/utils/zones';
 import {Calendar} from '../../Calendar';
 import {constrainValue} from '../../CalendarView/utils';
 import {RelativeDatePicker} from '../RelativeDatePicker';
+import type {RelativeDatePickerProps} from '../RelativeDatePicker';
 import type {Value} from '../hooks/useRelativeDatePickerState';
 
 const meta: Meta<typeof RelativeDatePicker> = {
@@ -180,3 +181,39 @@ export const WithCustomCalendar = {
         });
     },
 } satisfies Story;
+
+export const InsideDialog: StoryObj<RelativeDatePickerProps & {disableDialogFocusTrap?: boolean}> =
+    {
+        ...Default,
+        render: function InsideDialog(args) {
+            const [isOpen, setOpen] = React.useState(false);
+            return (
+                <React.Fragment>
+                    <Button
+                        onClick={() => {
+                            setOpen(true);
+                        }}
+                    >
+                        Open dialog
+                    </Button>
+                    <Dialog
+                        open={isOpen}
+                        onClose={() => setOpen(false)}
+                        disableFocusTrap={args.disableDialogFocusTrap}
+                    >
+                        <Dialog.Header />
+                        <Dialog.Body>
+                            <div style={{paddingTop: 16}}>{Default.render(args)}</div>
+                        </Dialog.Body>
+                    </Dialog>
+                </React.Fragment>
+            );
+        },
+        argTypes: {
+            disableDialogFocusTrap: {
+                control: {
+                    type: 'boolean',
+                },
+            },
+        },
+    };
diff --git a/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts b/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts
@@ -15,7 +15,7 @@ import {i18n} from '../i18n';
 import type {RelativeDatePickerState} from './useRelativeDatePickerState';
 
 interface InnerRelativeDatePickerProps {
-    groupProps: React.HTMLAttributes<unknown>;
+    groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLElement>};
     fieldProps: TextInputProps;
     modeSwitcherProps: ButtonProps;
     calendarButtonProps: ButtonProps;
@@ -125,12 +125,14 @@ export function useRelativeDatePickerProps(
 
     function focusInput() {
         setTimeout(() => {
-            inputRef.current?.focus();
+            inputRef.current?.focus({preventScroll: true});
         });
     }
+    const groupRef = React.useRef<HTMLElement>(null);
 
     return {
         groupProps: {
+            ref: groupRef,
             tabIndex: -1,
             role: 'group',
             ...focusWithinProps,
@@ -199,6 +201,11 @@ export function useRelativeDatePickerProps(
                 setOpen(false);
                 focusInput();
             },
+            onOutsideClick: (e) => {
+                if (e.target && !groupRef.current?.contains(e.target as Node)) {
+                    setOpen(false);
+                }
+            },
             onTransitionExited: () => {
                 setFocusedDate(
                     mode === 'relative'
diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
@@ -250,6 +250,11 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 onClose={() => {
                     setOpen(false);
                 }}
+                focusInput={() => {
+                    setTimeout(() => {
+                        inputRef.current?.focus({preventScroll: true});
+                    });
+                }}
                 anchorRef={anchorRef}
                 isMobile={isMobile}
                 className={props.popupClassName}
diff --git a/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx b/src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx
@@ -1,11 +1,15 @@
+import React from 'react';
+
 import {dateTimeParse} from '@gravity-ui/date-utils';
+import {Button, Dialog} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {timeZoneControl} from '../../../demo/utils/zones';
 import type {Value} from '../../RelativeDatePicker';
 import {RelativeRangeDatePicker} from '../RelativeRangeDatePicker';
+import type {RelativeRangeDatePickerProps} from '../RelativeRangeDatePicker';
 
 const meta: Meta<typeof RelativeRangeDatePicker> = {
     title: 'Components/RelativeRangeDatePicker',
@@ -82,3 +86,40 @@ export const Default = {
         timeZone: timeZoneControl,
     },
 } satisfies Story;
+
+export const InsideDialog: StoryObj<
+    RelativeRangeDatePickerProps & {disableDialogFocusTrap?: boolean}
+> = {
+    ...Default,
+    render: function InsideDialog(args) {
+        const [isOpen, setOpen] = React.useState(false);
+        return (
+            <React.Fragment>
+                <Button
+                    onClick={() => {
+                        setOpen(true);
+                    }}
+                >
+                    Open dialog
+                </Button>
+                <Dialog
+                    open={isOpen}
+                    onClose={() => setOpen(false)}
+                    disableFocusTrap={args.disableDialogFocusTrap}
+                >
+                    <Dialog.Header />
+                    <Dialog.Body>
+                        <div style={{paddingTop: 16}}>{Default.render(args)}</div>
+                    </Dialog.Body>
+                </Dialog>
+            </React.Fragment>
+        );
+    },
+    argTypes: {
+        disableDialogFocusTrap: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+};
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx
@@ -26,13 +26,15 @@ export interface PickerDialogProps {
     isMobile?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onClose: () => void;
+    focusInput: () => void;
 }
 
 export function PickerDialog({
     props,
     state,
     open,
     onClose,
+    focusInput,
     isMobile,
     anchorRef,
     className,
@@ -52,13 +54,16 @@ export function PickerDialog({
     return (
         <Popup
             open={open}
+            onEscapeKeyDown={() => {
+                onClose();
+                focusInput();
+            }}
             onClose={onClose}
             role="dialog"
             anchorRef={anchorRef}
             contentClassName={b('content', {size: props.size}, className)}
             autoFocus
             focusTrap
-            restoreFocus
         >
             <DialogContent {...props} state={state} onApply={onClose} />
         </Popup>

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export function useDatePickerProps<T extends DateTime \| RangeValue<DateTime>>(`
`78`	`78`
`79`	`79`	`function focusInput() {`
`80`	`80`	`setTimeout(() => {`
`81`		`- inputRef.current?.focus();`
	`81`	`+ inputRef.current?.focus({preventScroll: true});`
`82`	`82`	`});`
`83`	`83`	`}`
`84`	`84`