fix(RelativeRangeDatePicker): correctly close picker popup inside dialog.

Closes #115

Author: ValeraS

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';
@@ -60,12 +60,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}

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> = {
@@ -179,3 +180,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',
+                },
+            },
+        },
+    };

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;
@@ -128,9 +128,11 @@ export function useRelativeDatePickerProps(
             inputRef.current?.focus();
         });
     }
+    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'

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -241,6 +241,11 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 onClose={() => {
                     setOpen(false);
                 }}
+                focusInput={() => {
+                    setTimeout(() => {
+                        inputRef.current?.focus();
+                    });
+                }}
                 anchorRef={anchorRef}
                 isMobile={isMobile}
                 className={props.popupClassName}

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',
@@ -81,3 +85,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',
+            },
+        },
+    },
+};

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>