Got initial dropdown population working

department-of-veterans-affairs · Feb 21, 2025 · 9f7b46c · 9f7b46c
1 parent fce866e
commit 9f7b46c
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 11 deletions.
diff --git a/src/applications/facility-locator/components/search-form/autosuggest/index.jsx b/src/applications/facility-locator/components/search-form/autosuggest/index.jsx
@@ -13,7 +13,6 @@ import { srClearOnBlur, srKeepOnBlur } from './StateReducer';
 function Autosuggest({
   // downshift props
   handleOnSelect,
-  defaultSelectedItem,
   initialSelectedItem = null,
   inputValue,
   itemToString = toDisplay,
@@ -30,7 +29,6 @@ function Autosuggest({
   downshiftInputProps,
   // options for the autosuggest to show
   options,
-  minCharacters = 3, // only trigger update after n=3 characters
   noItemsMessage = 'No results found',
   shouldShowNoResults = true,
   // showError - use the usa-input-error class to show the error
@@ -44,6 +42,7 @@ function Autosuggest({
   isLoading = false,
   loadingMessage = '',
   AutosuggestOptionComponent = AutosuggestOption,
+  showOptionsRestriction = undefined,
 }) {
   const {
     isOpen,
@@ -60,7 +59,6 @@ function Autosuggest({
     initialSelectedItem,
     inputId,
     onSelectedItemChange: handleOnSelect,
-    defaultSelectedItem,
     onInputValueChange,
     inputValue,
     isItemDisabled,
@@ -72,6 +70,12 @@ function Autosuggest({
     selectItem(null);
   };
 
+  let shouldBeShown = isOpen;
+
+  if (showOptionsRestriction !== undefined) {
+    shouldBeShown = isOpen && showOptionsRestriction;
+  }
+
   return (
     <div
       id={`${inputId}-autosuggest-container`}
@@ -102,7 +106,7 @@ function Autosuggest({
           getItemProps={getItemProps}
           highlightedIndex={highlightedIndex}
           options={options}
-          isShown={isOpen && !!inputValue && inputValue.length >= minCharacters}
+          isShown={shouldBeShown}
           itemToString={itemToString}
           noItemsMessage={noItemsMessage} // to display when no items are found - disabled item
           getMenuProps={getMenuProps}

diff --git a/src/applications/facility-locator/components/search-form/location/AddressAutosuggest.jsx b/src/applications/facility-locator/components/search-form/location/AddressAutosuggest.jsx
@@ -181,11 +181,12 @@ function AddressAutosuggest({
           geolocationInProgress={currentQuery.geolocationInProgress}
         />
       )}
-      /* eslint-enable prettier/prettier */
-      minCharacters={MIN_SEARCH_CHARS}
       keepDataOnBlur
       showDownCaret={false}
       shouldShowNoResults
+      showOptionsRestriction={
+        !!inputValue && inputValue.length >= MIN_SEARCH_CHARS
+      }
       isLoading={isGeocoding}
       loadingMessage="Searching..."
     />

diff --git a/...lications/facility-locator/components/search-form/service-type/VAMCServiceAutosuggest.jsx b/...lications/facility-locator/components/search-form/service-type/VAMCServiceAutosuggest.jsx
@@ -96,7 +96,6 @@ const VAMCServiceAutosuggest = ({ onChange }) => {
 
   return (
     <Autosuggest
-      defaultSelectedItem={allServicesOption}
       downshiftInputProps={{
         autoCorrect: 'off',
         disabled: false,

diff --git a/src/applications/facility-locator/hooks/useServiceType.jsx b/src/applications/facility-locator/hooks/useServiceType.jsx
@@ -99,6 +99,7 @@ export const filterMatches = (selector, term, facilityType) => {
       if (matched.priorityMatch || matched.secondaryMatch) {
         return matched;
       }
+
       return null;
     })
     .filter(v => v)

diff --git a/src/applications/facility-locator/tests/hooks/useServiceType.unit.spec.js b/src/applications/facility-locator/tests/hooks/useServiceType.unit.spec.js
@@ -5,7 +5,7 @@ import vaHealthcareServices from './test-va-healthcare-services.json';
 describe('filterMatches (VAMC)', () => {
   describe('when matches are expected', () => {
     const getServiceNamesOnly = filteredServices =>
-      filteredServices.map(service => service.hsdatum[0]);
+      filteredServices.map(service => service[0]);
 
     it('should return the correct match for a search term', () => {
       const results = filterMatches(vaHealthcareServices, 'mental', 'vamc');

diff --git a/src/applications/facility-locator/types/index.js b/src/applications/facility-locator/types/index.js
@@ -246,7 +246,6 @@ export const SearchFormTypes = {
  * inputRef: not required, use only if you programmatically need to focus the input or get something from it
  * isLoading: data is loading - to be shown in place of no results if no results is to be shown
  * labelSibling: optional element to render next to the label
- * minCharacters: optional minimum number of characters to start an action
  * noItemsMessage: message to show when no items are found (an error)
  * showDownCaret: optional flag to show the down caret/arrow
  * showError: optional flag to show the error state
@@ -256,9 +255,9 @@ export const SearchFormTypes = {
 export const AutosuggestProps = {
   AutosuggestOptionComponent: PropTypes.elementType,
   clearOnEscape: PropTypes.bool,
-  defaultSelectedItem: PropTypes.object,
   downshiftInputProps: PropTypes.object,
   handleOnSelect: PropTypes.func.isRequired,
+  initialSelectedItem: PropTypes.object,
   inputContainerClassName: PropTypes.string,
   inputError: PropTypes.element,
   inputId: PropTypes.string,
@@ -271,7 +270,6 @@ export const AutosuggestProps = {
   label: PropTypes.element.isRequired,
   labelSibling: PropTypes.element,
   loadingMessage: PropTypes.string,
-  minCharacters: PropTypes.number,
   noItemsMessage: PropTypes.string,
   onClearClick: PropTypes.func.isRequired,
   onInputValueChange: PropTypes.func.isRequired,