fix: fix clearing text on recieving null as value in datepicker

affects: @medly-components/core
medly · Jun 8, 2024 · 7c14373 · 7c14373
1 parent a712ffa
commit 7c14373
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -44,6 +44,7 @@ const Component: FC<DatePickerProps> = memo(
             inputRef = useCombinedRefs<HTMLInputElement>(ref, useRef(null)),
             [inputKey, setInputKey] = useState(0),
             [textValue, setTextValue] = useState(''),
+            [isFocused, setFocusedState] = useState(false),
             [builtInErrorMessage, setErrorMessage] = useState(''),
             [showCalendar, toggleCalendar] = useState(false),
             [active, setActive] = useState(false),
@@ -52,8 +53,10 @@ const Component: FC<DatePickerProps> = memo(
         useEffect(() => {
             if (date) {
                 setTextValue(format(date, displayFormat!).replace(new RegExp('\\/|\\-', 'g'), ' $& '));
+            } else if (!isErrorPresent && !isFocused) {
+                setTextValue('');
             }
-        }, [date, displayFormat]);
+        }, [date, isFocused, isErrorPresent, displayFormat]);
         const onTextChange = useCallback(
                 (event: React.ChangeEvent<HTMLInputElement>) => {
                     const inputValue = event.target.value,
@@ -95,7 +98,10 @@ const Component: FC<DatePickerProps> = memo(
                 [props.required, displayFormat, validator, minSelectableDate, maxSelectableDate]
             ),
             onBlur = useCallback(
-                (event: React.FocusEvent<HTMLInputElement>) => inputRef.current?.value && validate(event, props.onBlur),
+                (event: React.FocusEvent<HTMLInputElement>) => {
+                    setFocusedState(false);
+                    inputRef.current?.value && validate(event, props.onBlur);
+                },
                 [props.onBlur, displayFormat]
             ),
             onInvalid = useCallback(
@@ -105,6 +111,7 @@ const Component: FC<DatePickerProps> = memo(
             onFocus = useCallback(
                 (event: React.FocusEvent<HTMLInputElement>) => {
                     setActive(true);
+                    setFocusedState(true);
                     props.onFocus && props.onFocus(event);
                 },
                 [props.onFocus]

diff --git a/...core/src/components/DateRangePicker/DateRangeTextFields/useDateRangeTextFieldsHandlers.ts b/...core/src/components/DateRangePicker/DateRangeTextFields/useDateRangeTextFieldsHandlers.ts
@@ -118,10 +118,22 @@ export const useDateRangeTextFieldsHandlers = (props: Props) => {
     useEffect(() => {
         const formattedStartDate = selectedDates.startDate ? getFormattedDate(selectedDates.startDate, displayFormat) : '',
             formattedEndDate = selectedDates.endDate ? getFormattedDate(selectedDates.endDate, displayFormat) : '';
-        formattedStartDate && setStartDateText(formattedStartDate);
-        formattedEndDate && setEndDateText(formattedEndDate);
-        formattedStartDate && setStartDateMaskLabel(formattedStartDate || mask);
-        formattedEndDate && setEndDateMaskLabel(formattedEndDate || mask);
+
+        if (formattedStartDate) {
+            setStartDateText(formattedStartDate);
+            setStartDateMaskLabel(formattedStartDate);
+        } else if (!isActive && !isErrorPresent) {
+            setStartDateText('');
+            setStartDateMaskLabel(mask);
+        }
+
+        if (formattedEndDate) {
+            setEndDateText(formattedEndDate);
+            setEndDateMaskLabel(formattedEndDate);
+        } else if (!isActive && !isErrorPresent) {
+            setEndDateText('');
+            setEndDateMaskLabel(mask);
+        }
         isValidDate(selectedDates.startDate) && isValidDate(selectedDates.endDate) && setErrorMessage('');
     }, [isActive, selectedDates, displayFormat]);