fix: correctly control popup open state in pickers (#17)

Author: ValeraS

src/components/DateField/hooks/useDateFieldProps.ts

@@ -103,13 +103,15 @@ export function useDateFieldProps(
                 if (state.selectedSectionIndexes !== null) {
                     return;
                 }
-                const input = inputRef.current;
+                const input = e.target;
+                const isAutofocus = !inputRef.current;
                 setTimeout(() => {
                     if (!input || input !== inputRef.current) {
                         return;
                     }
-
-                    if (
+                    if (isAutofocus) {
+                        state.focusSectionInPosition(0);
+                    } else if (
                         // avoid selecting all sections when focusing empty field without value
                         input.value.length &&
                         Number(input.selectionEnd) - Number(input.selectionStart) ===

src/components/DateField/hooks/useDateFieldState.ts

@@ -156,9 +156,7 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
             : placeholderDate;
     const sectionsState = useSectionsState(sections, displayValue, validSegments);
 
-    const [selectedSections, setSelectedSections] = React.useState<number | 'all'>(() => {
-        return sectionsState.editableSections[0]?.previousEditableSection ?? -1;
-    });
+    const [selectedSections, setSelectedSections] = React.useState<number | 'all'>(-1);
 
     const selectedSectionIndexes = React.useMemo<{
         startIndex: number;

src/components/DatePicker/DatePicker.scss

@@ -7,6 +7,8 @@ $block: '.#{variables.$ns}date-picker';
 
     display: inline-block;
 
+    outline: none;
+
     &__field {
         width: 100%;
 
@@ -15,6 +17,12 @@ $block: '.#{variables.$ns}date-picker';
         }
     }
 
+    &__popup-anchor {
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+    }
+
     &__popup-content {
         outline: none;
     }

src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';
+import {Calendar as CalendarIcon} from '@gravity-ui/icons';
+import {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';
 
-import type {CalendarProps} from '../Calendar';
-import {useDateFieldProps, useDateFieldState} from '../DateField';
+import {Calendar, type CalendarProps} from '../Calendar';
+import {DateField} from '../DateField';
 import type {
     AccessibilityProps,
     DateFieldBase,
@@ -14,8 +15,8 @@ import type {
     TextInputProps,
 } from '../types';
 
-import {DesktopCalendar, DesktopCalendarButton} from './DesktopCalendar';
 import {MobileCalendar, MobileCalendarIcon} from './MobileCalendar';
+import {useDatePickerProps} from './hooks/useDatePickerProps';
 import {useDatePickerState} from './hooks/useDatePickerState';
 import {b} from './utils';
 
@@ -32,16 +33,7 @@ export interface DatePickerProps
     children?: (props: CalendarProps) => React.ReactNode;
 }
 
-export function DatePicker({
-    value,
-    defaultValue,
-    onUpdate,
-    className,
-    onFocus,
-    onBlur,
-    children,
-    ...props
-}: DatePickerProps) {
+export function DatePicker({value, defaultValue, onUpdate, className, ...props}: DatePickerProps) {
     const anchorRef = React.useRef<HTMLDivElement>(null);
 
     const state = useDatePickerState({
@@ -51,70 +43,44 @@ export function DatePicker({
         onUpdate,
     });
 
-    const [isMobile] = useMobile();
-
-    const [isActive, setActive] = React.useState(false);
-    const {focusWithinProps} = useFocusWithin({
-        onFocusWithin: onFocus,
-        onBlurWithin: onBlur,
-        onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
-        },
-    });
+    const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =
+        useDatePickerProps(state, props);
 
-    const fieldState = useDateFieldState({
-        value: state.value,
-        onUpdate: state.setValue,
-        disabled: state.disabled,
-        readOnly: state.readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format: state.format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-    });
-
-    const {inputProps} = useDateFieldProps(fieldState, props);
+    const [isMobile] = useMobile();
 
     return (
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <div
-            ref={anchorRef}
-            className={b(null, className)}
-            style={props.style}
-            {...focusWithinProps}
-            role="group"
-            aria-disabled={state.disabled || undefined}
-            onKeyDown={(e) => {
-                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    state.setOpen(true);
-                }
-            }}
-        >
+        <div className={b(null, className)} {...groupProps}>
             {isMobile ? (
                 <MobileCalendar props={props} state={state} />
             ) : (
-                <DesktopCalendar
-                    anchorRef={anchorRef}
-                    props={props}
-                    state={state}
-                    renderCalendar={children}
-                />
+                <div ref={anchorRef} className={b('popup-anchor')}>
+                    <Popup anchorRef={anchorRef} {...popupProps}>
+                        <div className={b('popup-content')}>
+                            {typeof props.children === 'function' ? (
+                                props.children(calendarProps)
+                            ) : (
+                                <Calendar {...calendarProps} />
+                            )}
+                            {state.hasTime && (
+                                <div className={b('time-field-wrapper')}>
+                                    <DateField {...timeInputProps} />
+                                </div>
+                            )}
+                        </div>
+                    </Popup>
+                </div>
             )}
             <TextInput
-                {...inputProps}
-                value={fieldState.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}
+                {...fieldProps}
                 className={b('field', {mobile: isMobile})}
-                hasClear={!isMobile && inputProps.hasClear}
+                hasClear={!isMobile && fieldProps.hasClear}
                 rightContent={
                     isMobile ? (
                         <MobileCalendarIcon props={props} state={state} />
                     ) : (
-                        <DesktopCalendarButton props={props} state={state} />
+                        <Button {...calendarButtonProps}>
+                            <Icon data={CalendarIcon} />
+                        </Button>
                     )
                 }
             />