STCOM-1231 Added indexRef and inputRef props to <SearchField> (#…

…2169)

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Add support for new match option `containsAll` in `<AdvancedSearch>`. Refs STCOM-1223.
 * Ensure CSS visibility of datepicker's year input number spinner. Refs STCOM-1225.
 * Include pagination height in MCL container height calculation. Refs STCOM-1224.
+* Added `indexRef` and `inputRef` props to `<SearchField>`. Refs STCOM-1231.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)

lib/SearchField/SearchField.js

@@ -37,8 +37,15 @@ const propTypes = {
   disabled: PropTypes.bool,
   id: PropTypes.string,
   indexName: PropTypes.string,
+  indexRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   inputClass: PropTypes.string,
-  inputRef: PropTypes.object,
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   inputType: PropTypes.oneOf(Object.values(INPUT_TYPES)),
   loading: PropTypes.bool,
   lockWidth: PropTypes.bool,
@@ -87,6 +94,8 @@ const SearchField = (props) => {
     onSubmitSearch,
     lockWidth,
     newLineOnShiftEnter,
+    inputRef,
+    indexRef,
     ...rest
   } = props;
 
@@ -112,6 +121,7 @@ const SearchField = (props) => {
         selectClass={css.select}
         value={selectedIndex}
         name={indexName}
+        inputRef={indexRef}
       >
         {searchableOptions}
       </Select>
@@ -149,6 +159,7 @@ const SearchField = (props) => {
       value: value || '',
       readOnly: loading || rest.readOnly,
       placeholder: inputPlaceholder,
+      inputRef,
     };
 
     const textFieldProps = {

lib/SearchField/readme.md

@@ -77,7 +77,9 @@ Name | type | Description
 placeholder | string | Adds a placeholder to the search input field
 id | string | Adds an ID to the input field
 className | string | Adds a className to the root element
+indexRef | ref | Reference to search index dropdown element.
 inputClass | string | Adds a className to the input
+inputRef | ref | Reference to search query input element.
 inputType | string | Controls if input box should be `input` or `textarea`. Accepted values are `input` and `textarea`.
 aria-label | string | Adds an aria label to the input field. Camel-case `ariaLabel` is also accepted.
 value | string | The value of the input field