STSMACOM-859: Add the endDateInputRef prop to DateRangeFilter to acce…

…ss the end date element. (#1527)

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.
+* Add the `endDateInputRef` prop to `DateRangeFilter` to access the end date element. Refs STSMACOM-859.
 
 ## [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

@@ -97,6 +97,7 @@ const TheComponent = ({
   // accessible label for disambiguating this end input from others.
   endLabel,
   hideCalendarButton = false,
+  endDateInputRef,
 }) => {
   const [filterValue, setFilterValue] = React.useState({
     ...defaultFilterState,
@@ -105,6 +106,7 @@ const TheComponent = ({
 
   const setFocusRef = useSetRef(focusRef);
   const setFocusRefOnFocus = useSetRefOnFocus(focusRef);
+  const setEndDateInputRef = useSetRef(endDateInputRef);
 
   const { errors, selectedValues: selectedValuesState } = filterValue;
   const { startDate, endDate } = selectedValuesState;
@@ -217,7 +219,10 @@ const TheComponent = ({
         onKeyDown={handleKeyDown}
         placement={placement}
         usePortal
-        inputRef={setFocusRef}
+        inputRef={element => {
+          setFocusRef(element);
+          setEndDateInputRef(element);
+        }}
         aria-label={endLabel}
         hideCalendarButton={hideCalendarButton}
       />
@@ -250,6 +255,7 @@ TheComponent.propTypes = {
   }).isRequired,
   startLabel: PropTypes.string,
   requiredFields: PropTypes.arrayOf(PropTypes.oneOf([DATE_TYPES.START, DATE_TYPES.END])),
+  endDateInputRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };
 
 const DateRangeFilter = memo(TheComponent, arePropsEqual);