The tab order in the Experience modal is broken

Author: suppermancool

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
-import { FC } from 'react'
+import { FC, forwardRef, KeyboardEvent, useRef, useState } from 'react'
 import { getMonth, getYear } from 'date-fns'
 import { range } from 'lodash'
-import DatePicker from 'react-datepicker'
+import DatePicker, { ReactDatePicker } from 'react-datepicker'
 import classNames from 'classnames'
 import 'react-datepicker/dist/react-datepicker.css'
 
@@ -22,10 +22,10 @@ interface InputDatePickerProps {
     readonly hideInlineErrors?: boolean
     readonly hint?: string
     readonly label: string | JSX.Element
-    readonly maxDate?: Date | null | undefined;
-    readonly maxTime?: Date | undefined;
-    readonly minDate?: Date | null | undefined;
-    readonly minTime?: Date | undefined;
+    readonly maxDate?: Date | null | undefined
+    readonly maxTime?: Date | undefined
+    readonly minDate?: Date | null | undefined
+    readonly minTime?: Date | undefined
     readonly placeholder?: string
     readonly showMonthPicker?: boolean
     readonly showYearPicker?: boolean
@@ -48,7 +48,34 @@ const months: string[] = [
     'December',
 ]
 
+const CustomInput = forwardRef((props: any, ref) => {
+    const { stateHasFocus, datePickerRef, ...remaining }: any = props
+
+    function handleKeyDown(event: KeyboardEvent<HTMLButtonElement> | undefined): void {
+        if (event?.key === 'Enter') {
+            event?.stopPropagation()
+            event?.preventDefault()
+            datePickerRef.current?.setOpen(!datePickerRef.current?.isCalendarOpen(), true)
+        }
+    }
+
+    return (
+        <input
+            type='text'
+            ref={ref}
+            {...remaining}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={stateHasFocus}
+            onKeyDown={handleKeyDown}
+        />
+    )
+})
+
 const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps) => {
+    const datePickerRef = useRef<ReactDatePicker<never, undefined>>(null)
+
+    const [stateHasFocus, setStateHasFocus] = useState(false)
+
     function renderCustomHeader({
         date,
         changeYear,
@@ -112,15 +139,34 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
             className={classNames(props.className, styles.container)}
         >
             <DatePicker
+                ref={datePickerRef}
+                customInput={<CustomInput stateHasFocus={stateHasFocus} datePickerRef={datePickerRef} />}
                 renderCustomHeader={renderCustomHeader}
                 selected={props.date}
+                disabled={props.disabled}
                 onChange={(
                     date: Date | null,
                     event: React.SyntheticEvent<any> | undefined,
                 ) => {
                     event?.stopPropagation()
                     event?.preventDefault()
                     props.onChange?.(date)
+
+                    // re-focus on date input field after select date
+                    const calendarPortal = document.getElementById('react-date-portal')
+                    if (calendarPortal) {
+                        calendarPortal.style.display = 'none'
+                    }
+
+                    setTimeout(() => {
+                        datePickerRef.current?.setFocus()
+                        setTimeout(() => {
+                            datePickerRef.current?.setOpen(false, true)
+                            if (calendarPortal) {
+                                calendarPortal.style.display = ''
+                            }
+                        })
+                    })
                 }}
                 placeholderText={props.placeholder || 'Select a date'}
                 className={styles.datePickerWrapper}
@@ -132,6 +178,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
                 dateFormat={props.dateFormat}
                 popperPlacement='bottom'
                 portalId='react-date-portal'
+                onFocus={() => setStateHasFocus(true)}
+                onBlur={() => setStateHasFocus(false)}
             />
         </InputWrapper>
     )