feat: DatePicker に onBlur を渡せるように修正 (#4770)

* docs: DatePciekr の Story に onBlur を追加 * feat: DatePicker に onBlur を渡せるように修正
kufu · Jul 10, 2024 · 0422440 · 0422440
1 parent 51bdca1
commit 0422440
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/smarthr-ui/src/components/DatePicker/DatePicker.stories.tsx b/packages/smarthr-ui/src/components/DatePicker/DatePicker.stories.tsx
@@ -27,6 +27,7 @@ export const All: StoryFn = () => {
           from={new Date(1901, 0, 1)}
           to={new Date(2100, 11, 30)}
           onChangeDate={action('change')}
+          onBlur={action('blur')}
         />
       </FormControl>
       <FormControl title="Custom format (ex. Date.toDateString)">

diff --git a/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx b/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx
@@ -57,7 +57,6 @@ type OmitInputAttributes =
   | 'onChange'
   | 'onKeyPress'
   | 'onFocus'
-  | 'onBlur'
   | 'aria-expanded'
   | 'aria-controls'
   | 'aria-haspopup'
@@ -90,6 +89,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       formatDate,
       showAlternative,
       onChangeDate,
+      onBlur,
       ...inputAttrs
     },
     ref,
@@ -266,6 +266,22 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       },
       [isInputFocused, switchCalendarVisibility],
     )
+    const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(
+      (e) => {
+        const {
+          target: { value: inputString },
+        } = e
+        setIsInputFocused(false)
+        if (inputString === '') {
+          updateDate(null)
+        } else {
+          const newDate = stringToDate(inputString)
+          updateDate(newDate)
+        }
+        onBlur && onBlur(e)
+      },
+      [onBlur, stringToDate, updateDate],
+    )
     useGlobalKeyDown(handleKeyDown)
 
     const caretIconColor = useMemo(() => {
@@ -322,15 +338,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
               setIsInputFocused(true)
               switchCalendarVisibility(true)
             }}
-            onBlur={({ target: { value: inputString } }) => {
-              setIsInputFocused(false)
-              if (inputString === '') {
-                updateDate(null)
-                return
-              }
-              const newDate = stringToDate(inputString)
-              updateDate(newDate)
-            }}
+            onBlur={handleBlur}
             suffix={
               <span className={inputSuffixLayoutStyle}>
                 <span className={inputSuffixWrapperStyle}>