UISACQCOMP-227 Added new subscribeOnReset prop to <AcqDateRangeFilter>

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## (6.1.0 IN PROGRESS)
 
+## (6.0.1 IN PROGRESS)
+
+* Added new `subscribeOnReset` prop to `<AcqDateRangeFilter>`. Refs UISACQCOMP-227.
+
 ## [6.0.0](https://github.com/folio-org/stripes-acq-components/tree/v6.0.0) (2024-10-29)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.1.2...v6.0.0)
 

lib/AcqDateRangeFilter/AcqDateRangeFilter.js

@@ -1,9 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
+import noop from 'lodash/noop';
 
 import { DateRangeFilter } from '@folio/stripes/smart-components';
+import { nativeChangeFieldValue } from '@folio/stripes/components';
 
 import { useLocaleDateFormat } from '../hooks';
 import { FilterAccordion } from '../FilterAccordion';
@@ -43,13 +45,16 @@ const AcqDateRangeFilter = ({
   name,
   onChange,
   dateFormat,
+  subscribeOnReset,
   ...rest
 }) => {
   const stripesDateFormat = useLocaleDateFormat();
   const localeDateFormat = useMemo(
     () => dateFormat || stripesDateFormat,
     [stripesDateFormat, dateFormat],
   );
+  const startDateInputRef = useRef();
+  const endDateInputRef = useRef();
 
   const filterValue = activeFilters?.[0];
   const selectedValues = useMemo(() => {
@@ -63,6 +68,24 @@ const AcqDateRangeFilter = ({
     return `${startDateBackend}:${endDateBackend}`;
   }, [localeDateFormat]);
 
+  const onSearchReset = useCallback(() => {
+    // use setTimeout to avoid event conflicts that prevent some fields from being cleared.
+    setTimeout(() => {
+      if (startDateInputRef.current?.value) {
+        nativeChangeFieldValue(startDateInputRef, false, '');
+      }
+
+      if (endDateInputRef.current?.value) {
+        nativeChangeFieldValue(endDateInputRef, false, '');
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    subscribeOnReset(onSearchReset);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <FilterAccordion
       activeFilters={activeFilters}
@@ -80,6 +103,8 @@ const AcqDateRangeFilter = ({
         onChange={onChange}
         makeFilterString={makeDateRangeFilterString}
         dateFormat={localeDateFormat}
+        endDateInputRef={endDateInputRef}
+        focusRef={startDateInputRef}
         {...rest}
       />
     </FilterAccordion>
@@ -94,11 +119,13 @@ AcqDateRangeFilter.propTypes = {
   id: PropTypes.string,
   label: PropTypes.node,
   labelId: PropTypes.string,
+  subscribeOnReset: PropTypes.func,
 };
 
 AcqDateRangeFilter.defaultProps = {
   closedByDefault: true,
   disabled: false,
+  subscribeOnReset: noop,
 };
 
 export default AcqDateRangeFilter;

lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js

@@ -1,12 +1,21 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { noop } from 'lodash';
 
+import { nativeChangeFieldValue } from '@folio/stripes/components';
+
 import AcqDateRangeFilter from './AcqDateRangeFilter';
 
+jest.mock('@folio/stripes/components', () => ({
+  ...jest.requireActual('@folio/stripes/components'),
+  nativeChangeFieldValue: jest.fn(),
+}));
+
 const FILTER_LABEL = 'some date filter';
 const FILTER_NAME = 'some-date-filter';
 
+const mockSubscribeOnReset = jest.fn();
+
 const renderFilter = (closedByDefault, onChange = noop, dateFormat) => (render(
   <AcqDateRangeFilter
     id="some-date-filter"
@@ -15,6 +24,7 @@ const renderFilter = (closedByDefault, onChange = noop, dateFormat) => (render(
     closedByDefault={closedByDefault}
     onChange={onChange}
     dateFormat={dateFormat}
+    subscribeOnReset={mockSubscribeOnReset}
   />,
 ));
 
@@ -32,6 +42,12 @@ describe('AcqDateRangeFilter component', () => {
     expect(button.getAttribute('aria-expanded') || 'false').toBe('false');
   });
 
+  it('should subscribe to reset events', () => {
+    renderFilter();
+
+    expect(mockSubscribeOnReset).toHaveBeenCalled();
+  });
+
   it('should be opened by default when closedByDefault=false prop is passed', () => {
     const { container } = renderFilter(false);
     const button = container.querySelector('[id="accordion-toggle-button-some-date-filter"]');
@@ -78,4 +94,26 @@ describe('AcqDateRangeFilter component', () => {
 
     expect(onChangeFilter).toHaveBeenCalled();
   });
+
+  describe('when reset handler is called', () => {
+    it('should clear dates', async () => {
+      const callResetHandler = mockSubscribeOnReset.mockImplementation(cb => {
+        cb?.();
+      });
+
+      const { getByLabelText } = renderFilter(false, () => {}, 'YYYY-DD-MM');
+      const fromDate = getByLabelText('stripes-smart-components.dateRange.from');
+      const toDate = getByLabelText('stripes-smart-components.dateRange.to');
+
+      fireEvent.change(fromDate, { target: { value: '2000-01-01' } });
+      fireEvent.change(toDate, { target: { value: '2020-01-01' } });
+
+      expect(fromDate).toHaveValue('2000-01-01');
+      expect(toDate).toHaveValue('2020-01-01');
+
+      callResetHandler();
+
+      await waitFor(() => expect(nativeChangeFieldValue).toHaveBeenCalledTimes(2));
+    });
+  });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-acq-components",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Component library for Stripes Acquisitions modules",
   "publishConfig": {
     "registry": "https://repository.folio.org/repository/npm-folio/"