STSMACOM-857 Fix <DateRangeFilter> only shows an error in one of fa…

…iled inputs (#1520) * STSMACOM-857 Fix `<DateRangeFilter>` only shows an error in one of failed inputs * STSMACOM-857 update tests * STSMACOM-857 remove old comment
folio-org · Sep 30, 2024 · 6ed5f87 · 6ed5f87
1 parent ebc029d
commit 6ed5f87
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@
 * Bump up `actions/upload-artifact@v2` to `actions/upload-artifact@v4`. Refs STSMACOM-854.
 * `DateRangeFilter` - add the optional `hideCalendarButton` property to hide the calendar icon button; add error message for invalid YYYY format. Refs STSMACOM-855.
 * Display `System` user when there is no `updatedByUserId` field in metadata. Refs STSMACOM-858.
+* Fix `<DateRangeFilter>` only shows an error in one of failed inputs. Fixes STSMACOM-857.
 
 ## [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
@@ -164,9 +164,9 @@ const TheComponent = ({
     };
 
     setFilterValue({
-      ...defaultFilterState,
+      ...filterValue,
       errors: {
-        ...defaultFilterState.errors, // reset filter errors on every change
+        ...filterValue.errors,
         [errorName]: dateIsInvalid
       },
       selectedValues: newSelectedValues

diff --git a/lib/SearchAndSort/components/DateRangeFilter/tests/DateRangeFilter-test.js b/lib/SearchAndSort/components/DateRangeFilter/tests/DateRangeFilter-test.js
@@ -102,6 +102,16 @@ describe('DateRangeFilter', () => {
       });
     });
 
+    describe('and both dates are invalid', () => {
+      beforeEach(async () => {
+        await startPicker.fillIn('1999-13-32');
+        await endPicker.fillIn('1999-13-32');
+      });
+
+      it('should display corresponding error below start date input', () => startPicker.find(ErrorInteractor(invalidMessage)).exists());
+      it('should display corresponding error below end date input', () => endPicker.find(ErrorInteractor(invalidMessage)).exists());
+    });
+
     describe('when start date is missing and "Apply" button was clicked', () => {
       beforeEach(async () => {
         await endPicker.fillIn('2005-01-03');