From 346359cf48195f259b9082d24ac24b181f973057 Mon Sep 17 00:00:00 2001
From: Denys Bohdan <denys_bohdan@epam.com>
Date: Thu, 17 Oct 2024 15:24:11 +0200
Subject: [PATCH] STSMACOM-860  Fix `<DateRangeFilter>` validation errors
 disappear when another facet value changes

---
 CHANGELOG.md                                  |  1 +
 .../DateRangeFilter/DateRangeFilter.js        | 16 +++++++++++++---
 lib/utils/usePrevious.js                      | 19 +++++++++----------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e1837173..a541d536f 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/lib/SearchAndSort/components/DateRangeFilter/DateRangeFilter.js b/lib/SearchAndSort/components/DateRangeFilter/DateRangeFilter.js
index b6b585b76..4740bf9ea 100644
--- a/lib/SearchAndSort/components/DateRangeFilter/DateRangeFilter.js
+++ b/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);
@@ -180,11 +182,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 (
     <>
diff --git a/lib/utils/usePrevious.js b/lib/utils/usePrevious.js
index d321e6783..8c092b183 100644
--- a/lib/utils/usePrevious.js
+++ b/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;