From c433383b9324301175033873af87bb70d9ed613f Mon Sep 17 00:00:00 2001
From: Roman Vozbrannyi <romanvozbrannyi@gmail.com>
Date: Mon, 20 Feb 2023 14:17:20 +0100
Subject: [PATCH] feat: date-input on-blur

---
 src/components/form/date-input/index.tsx | 25 ++++++++++++++++++++----
 stories/DateInput/DateInput.stories.tsx  |  7 +++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/form/date-input/index.tsx b/src/components/form/date-input/index.tsx
index 4239db96..3963868a 100644
--- a/src/components/form/date-input/index.tsx
+++ b/src/components/form/date-input/index.tsx
@@ -22,7 +22,9 @@ interface InputProp extends InputPropsType {
   type: string;
 }
 
-export interface DateInputProps extends React.InputHTMLAttributes<HTMLTextAreaElement>, Pick<InputComponent, 'error'> {
+export interface DateInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>,
+    Pick<InputComponent, 'error'> {
   /**
    * Input divider
    */
@@ -39,6 +41,10 @@ export interface DateInputProps extends React.InputHTMLAttributes<HTMLTextAreaEl
    * Inputs config
    * */
   inputs: InputProp[];
+  /**
+   * Callback fired when the input is blurred
+   * */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
   /**
    * Callback fired when the value changes
    * */
@@ -46,7 +52,7 @@ export interface DateInputProps extends React.InputHTMLAttributes<HTMLTextAreaEl
   /**
    * The value of the input
    * */
-  value: string;
+  value?: string | Date | null;
   /**
    * The props used for wrapper component
    * */
@@ -55,7 +61,7 @@ export interface DateInputProps extends React.InputHTMLAttributes<HTMLTextAreaEl
 
 export const DateInput = React.forwardRef<HTMLDivElement, DateInputProps>(
   (
-    { inputs, disabled, divider, wrapperProps, value, onChange, className, error }: DateInputProps,
+    { inputs, disabled, divider, wrapperProps, value, onChange, onBlur, className, error }: DateInputProps,
     ref,
   ): JSX.Element => {
     const theme = useTheme();
@@ -119,6 +125,17 @@ export const DateInput = React.forwardRef<HTMLDivElement, DateInputProps>(
       handleFocusNextInput(value, index);
     };
 
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
+      if (
+        onBlur &&
+        inputToRef[0].current !== e.relatedTarget &&
+        inputToRef[1].current !== e.relatedTarget &&
+        inputToRef[2].current !== e.relatedTarget
+      ) {
+        onBlur(e);
+      }
+    };
+
     return (
       <StyledDayPicker className={cx('dateInput', error && 'error', className)} ref={ref} {...wrapperProps}>
         <div className='dateInputWrapper'>
@@ -129,11 +146,11 @@ export const DateInput = React.forwardRef<HTMLDivElement, DateInputProps>(
             return (
               <div className='dateInputItem' key={`text-input-${input.type}`}>
                 <TextInput
-                  id={`text-input-${input.type}`}
                   key={`text-input-${input.type}-input`}
                   onChange={(e): void => {
                     handleChange(e, index, input.type);
                   }}
+                  onBlur={handleBlur}
                   disabled={disabled}
                   inputRef={inputToRef[index]}
                   title={input.title}
diff --git a/stories/DateInput/DateInput.stories.tsx b/stories/DateInput/DateInput.stories.tsx
index 8d722600..bab63db7 100644
--- a/stories/DateInput/DateInput.stories.tsx
+++ b/stories/DateInput/DateInput.stories.tsx
@@ -34,16 +34,19 @@ export default {
         type: 'date',
       },
     },
+    onBlur: {
+      control: { disable: true },
+    },
   },
 } as ComponentMeta<typeof DateInput>;
 
 const Template: ComponentStory<typeof DateInput> = (args) => {
   const [value, setValue] = React.useState<Date | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | undefined>(undefined);
 
   const handleChange = (v) => {
     if (isValid(v)) {
-      setError(null);
+      setError(undefined);
     } else {
       setError('Invalid date');
     }