fix: correctly close relative pickers dialogs (#180)

ValeraS · web-flow · commit 945b8b552869 · 2025-03-31T14:43:49.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DatePicker/hooks/useDatePickerProps.ts b/src/components/DatePicker/hooks/useDatePickerProps.ts
@@ -150,6 +150,7 @@ export function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(
                 );
             },
             modal: !props.disableFocusTrap,
+            returnFocus: !props.disableFocusTrap,
             disablePortal: props.disablePortal,
             placement: props.popupPlacement,
             offset: props.popupOffset,
diff --git a/src/components/RelativeDateField/RelativeDateField.tsx b/src/components/RelativeDateField/RelativeDateField.tsx
@@ -54,10 +54,13 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
     const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
 
     const [isOpen, setOpen] = React.useState(false);
+    const dialogClosing = React.useRef(false);
 
     const {focusWithinProps} = useFocusWithin({
         onFocusWithinChange: (isFocusWithin) => {
-            setOpen(isFocusWithin);
+            if (!dialogClosing.current) {
+                setOpen(isFocusWithin);
+            }
         },
         isDisabled: isMobile,
     });
@@ -86,6 +89,12 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
                         setOpen(true);
                     }
                 }}
+                controlProps={{
+                    ...inputProps.controlProps,
+                    onClick: () => {
+                        setOpen(true);
+                    },
+                }}
             />
             <HiddenInput
                 name={props.name}
@@ -100,10 +109,16 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
                 <Popup
                     anchorElement={anchor}
                     open={isOpen}
-                    onOpenChange={(_open, _event, reason) => {
-                        if (reason === 'escape-key') {
+                    onOpenChange={(open) => {
+                        if (!open) {
                             setOpen(false);
                         }
+                        dialogClosing.current = !open;
+                    }}
+                    onTransitionOutComplete={() => {
+                        setTimeout(() => {
+                            dialogClosing.current = false;
+                        });
                     }}
                     placement={props.popupPlacement}
                     offset={props.popupOffset}
diff --git a/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts b/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts
@@ -217,6 +217,7 @@ export function useRelativeDatePickerProps(
             offset: props.popupOffset,
             className: props.popupClassName,
             style: props.popupStyle,
+            returnFocus: false,
         },
         calendarProps: {
             ref: calendarRef,
diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
@@ -23,22 +23,22 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
     const isMobile = useMobile();
 
     const [anchor, setAnchor] = React.useState<HTMLDivElement | null>(null);
-    const inputRef = React.useRef<HTMLInputElement>(null);
+    const dialogClosing = React.useRef(false);
 
-    const [isActive, setIsActive] = React.useState(false);
     const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);
 
     const {focusWithinProps} = useFocusWithin({
         isDisabled: props.disabled,
-        onFocusWithin: (e) => {
-            if (!isActive) {
-                props.onFocus?.(e);
-            }
-        },
-        onBlurWithin: (e) => {
-            if (!open) {
-                setIsActive(false);
-                props.onBlur?.(e);
+        onFocusWithin: props.onFocus,
+        onBlurWithin: props.onBlur,
+        onFocusWithinChange: (isFocusWithin) => {
+            if (
+                isFocusWithin &&
+                !dialogClosing.current &&
+                !props.renderControl &&
+                document.activeElement?.tagName !== 'BUTTON'
+            ) {
+                setOpen(true);
             }
         },
     });
@@ -54,16 +54,13 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 props={props}
                 state={state}
                 open={open}
+                setOpen={setOpen}
                 isMobile={isMobile}
-                ref={inputRef}
                 onClick={() => {
                     if (props.disabled) {
                         return;
                     }
-                    if (!open) {
-                        setIsActive(true);
-                        setOpen(true);
-                    }
+                    setOpen(true);
                 }}
                 onKeyDown={(e) => {
                     if (props.disabled) {
@@ -75,15 +72,8 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                     }
                 }}
                 onClickCalendar={() => {
-                    setIsActive(true);
                     setOpen(!open);
                 }}
-                onFocus={() => {
-                    if (!isActive) {
-                        setIsActive(true);
-                        setOpen(true);
-                    }
-                }}
                 onUpdate={(v: string) => {
                     if (!props.readOnly && !v) {
                         state.setValue(null, 'default');
@@ -134,16 +124,18 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 onUpdate={state.setValue}
                 timeZone={state.timeZone}
                 open={open}
-                onClose={(reason) => {
+                onClose={() => {
                     setOpen(false);
-                    if (reason === 'escape-key') {
-                        setTimeout(() => {
-                            inputRef.current?.focus({preventScroll: true});
-                        });
-                    }
+                    dialogClosing.current = true;
+                }}
+                onRemove={() => {
+                    setTimeout(() => {
+                        dialogClosing.current = false;
+                    });
                 }}
                 anchor={anchor}
                 modal
+                returnFocus
                 popupClassName={props.popupClassName}
                 popupStyle={props.popupStyle}
                 popupPlacement={props.popupPlacement}
diff --git a/src/components/RelativeRangeDatePicker/components/Control/Control.tsx b/src/components/RelativeRangeDatePicker/components/Control/Control.tsx
@@ -17,10 +17,11 @@ export type ControlProps = {
     props: RelativeRangeDatePickerProps;
     state: RelativeRangeDatePickerState;
     open: boolean;
+    setOpen: (open: boolean) => void;
     isMobile?: boolean;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    onFocus: (e: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
     onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;
     onUpdate: (value: string) => void;
 };
@@ -29,7 +30,18 @@ const b = block('relative-range-date-picker-control');
 
 export const Control = React.forwardRef<HTMLInputElement, ControlProps>(
     (
-        {props, state, open, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate},
+        {
+            props,
+            state,
+            open,
+            setOpen,
+            isMobile,
+            onClick,
+            onKeyDown,
+            onFocus,
+            onClickCalendar,
+            onUpdate,
+        },
         ref,
     ) => {
         const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;
@@ -75,6 +87,7 @@ export const Control = React.forwardRef<HTMLInputElement, ControlProps>(
                 validationState,
                 errorMessage,
                 open,
+                setOpen,
                 triggerProps,
             })
         ) : (
@@ -111,6 +124,7 @@ export const Control = React.forwardRef<HTMLInputElement, ControlProps>(
                             aria-expanded={open}
                             aria-label={i18n('Range date picker')}
                             onClick={onClickCalendar}
+                            tabIndex={-1}
                         >
                             <Icon data={CalendarIcon} />
                         </Button>
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx
@@ -20,8 +20,12 @@ export interface PickerDialogProps extends PickerFormProps, PopupStyleProps {
     open: boolean;
     /** Handles popup close event */
     onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;
+    /** Handles popup remove from DOM event */
+    onRemove?: () => void;
     /** If true `Popup` act like a modal dialog */
     modal?: boolean;
+    /** Element which focus should be returned to */
+    returnFocus?: PopupProps['returnFocus'];
     /** If true `Sheet` is used instead of `Popup`  */
     isMobile?: boolean;
 }
@@ -36,6 +40,8 @@ export function PickerDialog({
     popupPlacement,
     popupOffset,
     modal,
+    returnFocus = false,
+    onRemove,
     ...props
 }: PickerDialogProps) {
     if (isMobile) {
@@ -44,6 +50,9 @@ export function PickerDialog({
                 visible={open}
                 onClose={() => {
                     onClose('outside-press');
+                    setTimeout(() => {
+                        onRemove?.();
+                    });
                 }}
                 contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}
             >
@@ -73,6 +82,8 @@ export function PickerDialog({
             className={b('content', {size: props.size}, popupClassName)}
             style={popupStyle}
             modal={modal}
+            returnFocus={returnFocus}
+            onTransitionOutComplete={onRemove}
         >
             <PickerForm
                 {...props}
diff --git a/src/components/RelativeRangeDatePicker/types.ts b/src/components/RelativeRangeDatePicker/types.ts
@@ -45,6 +45,7 @@ export interface RelativeRangeDatePickerRenderControlProps {
     errorMessage?: React.ReactNode;
     validationState?: 'invalid';
     open: boolean;
+    setOpen: (open: boolean) => void;
     triggerProps: RelativeRangeDatePickerTriggerProps;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ export interface RelativeRangeDatePickerRenderControlProps {`
`45`	`45`	`errorMessage?: React.ReactNode;`
`46`	`46`	`validationState?: 'invalid';`
`47`	`47`	`open: boolean;`
	`48`	`+ setOpen: (open: boolean) => void;`
`48`	`49`	`triggerProps: RelativeRangeDatePickerTriggerProps;`
`49`	`50`	`}`
`50`	`51`