fix: add blur to datepicker upon valid selection

culturecreates · Dec 5, 2023 · 946baa8 · 946baa8
1 parent d3404d7
commit 946baa8
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -7,17 +7,31 @@ import frLocale from 'antd/es/date-picker/locale/fr_CA';
 import enLocale from 'antd/es/date-picker/locale/en_US';
 
 function DatePickerStyled(props) {
+  const handleDateChange = (value) => {
+    if (value && value.isValid()) {
+      datePickerRef.current.blur();
+    }
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
+
+  const datePickerRef = React.createRef();
+
   return (
     <DatePicker
+      ref={datePickerRef}
       format="DD/MM/YYYY"
       size="large"
       locale={i18n?.language === 'en' ? enLocale : i18n?.language === 'fr' && frLocale}
       className="date-picker-wrapper"
       {...props}
+      changeOnBlur={true}
       placeholder={i18n?.language === 'en' ? 'DD/MM/YYYY' : 'JJ/MM/AAAA'}
       showToday={false}
       popupClassName="date-picker-calendar"
       getPopupContainer={(trigger) => trigger.parentNode}
+      onChange={handleDateChange}
     />
   );
 }