STSMACOM-860 Fix <DateRangeFilter> validation errors disappear when…

… another facet value changes

CHANGELOG.md

@@ -29,6 +29,7 @@
 * Avoid deprecated `defaultProps` for functional components. Refs STSMACOM-835.
 * Upgrade `notes` to `v4.0`. Refs STSMACOM-861.
 * Improve confirmation modal footer for `ControlledVocab` component. Refs STSMACOM-863.
+* Fix `<DateRangeFilter>` validation errors disappear when another facet value changes. Fixes STSMACOM-860.
 
 ## [9.1.3](https://github.com/folio-org/stripes-smart-components/tree/v9.1.3) (2024-05-06)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v9.1.2...v9.1.3)

lib/SearchAndSort/components/DateRangeFilter/DateRangeFilter.js

@@ -1,10 +1,11 @@
 import React, { memo } from 'react';
 import { PropTypes } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import isEqual from 'lodash/isEqual';
 
 import { Button, Datepicker, AVAILABLE_PLACEMENTS } from '@folio/stripes-components';
 
-import { useSetRef, useSetRefOnFocus } from '../../../utils';
+import { usePrevious, useSetRef, useSetRefOnFocus } from '../../../utils';
 import {
   isDateValid,
   validateDateRange,
@@ -102,6 +103,7 @@ const TheComponent = ({
     ...defaultFilterState,
     selectedValues
   });
+  const previousSelectedValues = usePrevious(selectedValues, { startDate: '', endDate: '' });
 
   const setFocusRef = useSetRef(focusRef);
   const setFocusRefOnFocus = useSetRefOnFocus(focusRef);
@@ -135,10 +137,12 @@ const TheComponent = ({
     });
   }, [startDate, endDate, onChange, makeFilterString, name]);
 
+  const isDatesEmpty = (_startDate = '', _endDate = '') => _startDate === '' && _endDate === '';
+
   const onApply = React.useCallback((event) => {
     if (event) event.preventDefault();
 
-    const bothDatesEmpty = startDate === '' && endDate === '';
+    const bothDatesEmpty = isDatesEmpty(startDate, endDate);
 
     if (!bothDatesEmpty) {
       const validationData = validateDateRange(selectedValuesState, dateFormat, requiredFields);
@@ -180,11 +184,19 @@ const TheComponent = ({
   };
 
   React.useEffect(() => {
+    // only need to re-initialize when props change. internal state change shouldn't trigger this
+
+    if (isEqual(previousSelectedValues, selectedValues)) {
+      return;
+    }
+
     setFilterValue({
       ...getInitialValidationData(selectedValues, dateFormat, requiredFields),
-      selectedValues
+      selectedValues,
     });
-  }, [selectedValues, dateFormat, requiredFields]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [previousSelectedValues, selectedValues, dateFormat, requiredFields]);
 
   return (
     <>

lib/SearchAndSort/components/DateRangeFilter/date-validations.js

@@ -55,5 +55,6 @@ export const validateDateRange = (dateRange, dateFormat, requiredFields = [DATE_
       startDateMissing,
       wrongDatesOrder,
     },
+    selectedValues: dateRange,
   };
 };

lib/utils/usePrevious.js

@@ -1,16 +1,15 @@
-import {
-  useRef,
-  useEffect,
-} from 'react';
+import { useState } from 'react';
 
-const usePrevious = value => {
-  const ref = useRef();
+const usePrevious = (value, defaultValue) => {
+  const [current, setCurrent] = useState(value);
+  const [previous, setPrevious] = useState(defaultValue);
 
-  useEffect(() => {
-    ref.current = value;
-  });
+  if (value !== current) {
+    setPrevious(current);
+    setCurrent(value);
+  }
 
-  return ref.current;
+  return previous;
 };
 
 export default usePrevious;