fix(fields): focus next date part input when already filled in DatePi…

…cker & DateRangePicker
MTES-MCT · Dec 21, 2022 · 38219de · 38219de
1 parent 226941a
commit 38219de
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,6 +2,7 @@
 
 - [Development](#development)
   - [First Setup](#first-setup)
+  - [Run](#run)
   - [Conventions](#conventions)
   - [Release](#release)
     - [Versionning](#versionning)
@@ -35,7 +36,13 @@ yarn
 yarn setup
 ```
 
-4. [Setup your IDE](https://yarnpkg.com/getting-started/editor-sdks).
+### Run
+
+```sh
+yarn start
+```
+
+1. [Setup your IDE](https://yarnpkg.com/getting-started/editor-sdks).
 
 ### Conventions
 

diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "build:copy": "sh ./scripts/build/copyPublicFiles.sh",
     "build:dev": "rm -Rf ./dist && rollup -c",
     "build:package": "node ./scripts/build/generatePackageJson.js",
-    "dev": "start-storybook -p 6006",
+    "dev": "start-storybook --no-open -p 6006",
+    "start": "start-storybook -p 6006",
     "icons": "yarn icons:clean && yarn icons:generate && yarn icons:lint",
     "icons:clean": "rm -Rf ./src/icons && mkdir ./src/icons",
     "icons:generate": "node --experimental-json-modules ./scripts/icons/generateIcons.mjs",

diff --git a/src/fields/DatePicker/index.tsx b/src/fields/DatePicker/index.tsx
@@ -110,8 +110,8 @@ export function DatePicker({
     timeInputRef.current.focus()
   }, [withTime])
 
-  const handleDateInputFilled = useCallback(
-    (nextDateTuple: DateTuple) => {
+  const handleDateInputChange = useCallback(
+    (nextDateTuple: DateTuple, isFilled: boolean) => {
       selectedDateTupleRef.current = nextDateTuple
 
       // If there is no time input or a time has already been selected,
@@ -125,7 +125,9 @@ export function DatePicker({
         submit()
       }
 
-      handleDateInputNext()
+      if (isFilled) {
+        handleDateInputNext()
+      }
     },
     [handleDateInputNext, submit, withTime]
   )
@@ -207,7 +209,7 @@ export function DatePicker({
             isCompact={isCompact}
             isForcedFocused={isCalendarPickerOpenRef.current}
             isLight={isLight}
-            onChange={handleDateInputFilled}
+            onChange={handleDateInputChange}
             onClick={openCalendarPicker}
             onNext={handleDateInputNext}
           />

diff --git a/src/fields/DateRangePicker/DateInput.tsx b/src/fields/DateRangePicker/DateInput.tsx
@@ -1,8 +1,7 @@
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { Calendar } from '../../icons'
-import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'
 import { NumberInput } from './NumberInput'
 import { formatNumberAsDoubleDigit } from './utils'
 
@@ -19,7 +18,7 @@ export type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'o
   isLight: boolean
   isStartDate?: boolean
   /** Called each time the date input is changed to a new valid value. */
-  onChange: (nextDateTuple: DateTuple) => Promisable<void>
+  onChange: (nextDateTuple: DateTuple, isFilled: boolean) => Promisable<void>
   onClick: () => Promisable<void>
 }
 function DateInputWithRef(
@@ -58,8 +57,6 @@ function DateInputWithRef(
     }
   }))
 
-  const currentUtcYear = useMemo(() => getUtcizedDayjs().year(), [])
-
   const handleBlur = useCallback(() => {
     setIsFocused(false)
   }, [])
@@ -75,6 +72,8 @@ function DateInputWithRef(
   const submit = useCallback(() => {
     setHasValidationError(false)
 
+    const isFilled = window.document.activeElement === yearInputRef.current
+
     switch (window.document.activeElement) {
       case dayInputRef.current:
         monthInputRef.current.focus()
@@ -110,7 +109,7 @@ function DateInputWithRef(
       formatNumberAsDoubleDigit(dayInputRef.current.value)
     ]
 
-    onChange(nextDateTuple)
+    onChange(nextDateTuple, isFilled)
   }, [onChange])
 
   return (
@@ -161,7 +160,7 @@ function DateInputWithRef(
           ref={yearInputRef}
           aria-label={`Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`}
           defaultValue={defaultValue && defaultValue[0]}
-          max={currentUtcYear}
+          max={2030}
           min={2020}
           onBack={() => monthInputRef.current.focus()}
           onBlur={handleBlur}

diff --git a/src/fields/DateRangePicker/index.tsx b/src/fields/DateRangePicker/index.tsx
@@ -144,8 +144,8 @@ export function DateRangePicker({
     endDateInputRef.current.focus()
   }, [withTime])
 
-  const handleDateInputFilled = useCallback(
-    (position: DateRangePosition, nextDateTuple: DateTuple) => {
+  const handleDateInputChange = useCallback(
+    (position: DateRangePosition, nextDateTuple: DateTuple, isFilled: boolean) => {
       if (position === DateRangePosition.START) {
         selectedStartDateTupleRef.current = nextDateTuple
 
@@ -160,7 +160,9 @@ export function DateRangePicker({
           submit()
         }
 
-        handleStartDateInputNext()
+        if (isFilled) {
+          handleStartDateInputNext()
+        }
       } else {
         selectedEndDateTupleRef.current = nextDateTuple
 
@@ -175,7 +177,9 @@ export function DateRangePicker({
           submit()
         }
 
-        handleEndDateInputNext()
+        if (isFilled) {
+          handleEndDateInputNext()
+        }
       }
     },
     [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]
@@ -290,7 +294,9 @@ export function DateRangePicker({
             isForcedFocused={isRangeCalendarPickerOpenRef.current}
             isLight={isLight}
             isStartDate
-            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)}
+            onChange={(nextDateTuple, isFilled) =>
+              handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled)
+            }
             onClick={openRangeCalendarPicker}
             onNext={handleStartDateInputNext}
           />
@@ -323,7 +329,9 @@ export function DateRangePicker({
             isForcedFocused={isRangeCalendarPickerOpenRef.current}
             isLight={isLight}
             onBack={handleEndDateInputPrevious}
-            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)}
+            onChange={(nextDateTuple, isFilled) =>
+              handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled)
+            }
             onClick={openRangeCalendarPicker}
             onNext={handleEndDateInputNext}
             onPrevious={handleEndDateInputPrevious}