wip: opens Datepicker when the input-field is clicked

Author: ivarni

packages/jokul/src/components/datepicker/DatePicker.tsx

@@ -7,6 +7,7 @@ import React, {
     MouseEvent,
     forwardRef,
     useCallback,
+    useEffect,
     useRef,
     useState,
 } from "react";
@@ -87,6 +88,9 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
 
         const calendarRef = useRef<HTMLDivElement>(null);
         const datepickerRef = useRef<HTMLDivElement>(null);
+        const [returnFocusTo, setReturnFocusTo] = useState<HTMLElement | null>(
+            null,
+        );
 
         /// Input events
 
@@ -180,10 +184,22 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             [onChange, setError, setDate, setShowCalendar, minDate, maxDate],
         );
 
+        const clickInput = useCallback(() => {
+            setShowCalendar((isOpen) => {
+                if (!isOpen) {
+                    window.requestAnimationFrame(() => {
+                        calendarRef.current?.focus();
+                    });
+                }
+                return !isOpen;
+            });
+        }, [setShowCalendar]);
+
         /// Calendar events
 
         const clickCalendar = useCallback(
             (e: MouseEvent<HTMLButtonElement>) => {
+                console.log("click calendar");
                 flushSync(() => {
                     setShowCalendar(!showCalendar);
                 });
@@ -249,6 +265,21 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             [setShowCalendar],
         );
 
+        useEffect(() => {
+            if (showCalendar) {
+                setReturnFocusTo(document.activeElement as HTMLElement);
+            } else {
+                if (
+                    inputRef.current?.contains(document.activeElement) ||
+                    document.activeElement === document.body
+                ) {
+                    window.requestAnimationFrame(() => {
+                        returnFocusTo?.focus();
+                    });
+                }
+            }
+        }, [showCalendar]);
+
         return (
             <InputGroup
                 id={id}
@@ -277,16 +308,27 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                         type="text"
                         placeholder={placeholder}
                         width={width}
+                        onClick={clickInput}
                         onFocus={handleFocus}
                         onBlur={handleBlur}
                         onChange={handleChange}
                         actionButton={
                             <Popover
                                 positionReference={inputRef}
                                 open={showCalendar}
-                                onOpenChange={() =>
-                                    setShowCalendar(!showCalendar)
-                                }
+                                onOpenChange={(open, event) => {
+                                    if (
+                                        event?.target &&
+                                        event.type === "click" &&
+                                        event.target === inputRef?.current
+                                    ) {
+                                        // We're toggling the open state on input
+                                        // clicks in a different event-handler.
+                                        console.log({ open });
+                                        return;
+                                    }
+                                    setShowCalendar(open);
+                                }}
                                 offset={8}
                             >
                                 <Popover.Trigger
@@ -307,8 +349,13 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
                                         <CalendarIcon />
                                     </IconButton>
                                 </Popover.Trigger>
-                                <Popover.Content initialFocus={-1} padding={24}>
+                                <Popover.Content
+                                    initialFocus={-1}
+                                    padding={24}
+                                    returnFocus={false}
+                                >
                                     <Calendar
+                                        tabIndex={-1}
                                         ref={calendarRef}
                                         density={density}
                                         date={date}

packages/jokul/src/components/datepicker/internal/Calendar.tsx

@@ -40,6 +40,7 @@ interface CalendarProps
     yearLabel?: string;
     yearsToShow?: YearsToShow;
     onTabOutside: React.KeyboardEventHandler;
+    tabIndex?: number;
 }
 
 const defaultMonths = [
@@ -73,6 +74,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
             yearLabel = "Velg år",
             yearsToShow = DEFAULT_YEARS_TO_SHOW,
             onTabOutside,
+            tabIndex,
             ...rest
         } = props;
 
@@ -442,6 +444,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
                 id={id}
                 className="jkl-calendar"
                 data-testid="jkl-calendar"
+                tabIndex={tabIndex}
             >
                 {/* Vi lytter på på trykk på Tab inne i kalenderen for å håndtere fokus */}
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}