MBMS-68435 change military history section flow pattern for pre-need …

…integration form
department-of-veterans-affairs · Nov 27, 2024 · 22c7138 · 22c7138
1 parent 6eb9f21
commit 22c7138
Showing 1 changed file with 45 additions and 37 deletions.
diff --git a/src/applications/pre-need-integration/components/MilitaryAutoSuggestField.jsx b/src/applications/pre-need-integration/components/MilitaryAutoSuggestField.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import Downshift from 'downshift';
 
 function MilitaryAutoSuggest({
@@ -12,20 +12,21 @@ function MilitaryAutoSuggest({
 
   useEffect(
     () => {
-      if (value) {
+      if (value && value !== inputValue) {
         setInputValue(value);
+        setValue(value);
       }
     },
     [value],
   );
 
-  const itemToString = item => (item ? item.value || item.key : inputValue);
+  const itemToString = item => (item ? `${item.key} - ${item.value}` : '');
 
   const getMatchScore = (input, labelValue) => {
     if (!input || !labelValue) return 0;
     const normalizedInput = input.toLowerCase();
     const label = `${labelValue.key} - ${labelValue.value}`;
-    const normalizedLabel = label ? label.toLowerCase() : '';
+    const normalizedLabel = label.toLowerCase();
     let score = normalizedLabel.startsWith(normalizedInput) ? 10000 : 0;
 
     normalizedInput.split(/\s+/).forEach(inputWord => {
@@ -37,60 +38,67 @@ function MilitaryAutoSuggest({
     return score;
   };
 
+  const filteredLabels = useMemo(
+    () => {
+      return labels
+        .map(label => ({
+          label,
+          score: getMatchScore(inputValue, label),
+        }))
+        .filter(item => item.score > 0)
+        .sort((a, b) => b.score - a.score)
+        .slice(0, maxItems);
+    },
+    [labels, inputValue, maxItems],
+  );
+
   return (
     <Downshift
       onChange={selection => {
-        setValue(`${selection.key.toUpperCase()} - ${selection.value}`);
-        onSelectionChange(selection);
+        if (selection) {
+          const formattedValue = `${selection.key.toUpperCase()} - ${
+            selection.value
+          }`;
+          setInputValue(formattedValue);
+          setValue(formattedValue);
+          onSelectionChange(selection);
+        }
       }}
       itemToString={itemToString}
-      selectedItem={value}
       inputValue={inputValue}
       onInputValueChange={setInputValue}
     >
       {({ getInputProps, getItemProps, isOpen, highlightedIndex }) => (
         <div className="relative">
-          {/* Add label with htmlFor */}
-          {/* <label htmlFor="military-auto-suggest"> */}
-          {/* Select a military rank: */}
           <input
             id="military-auto-suggest"
             type="text"
             {...getInputProps({
-              value,
               onChange: e => {
                 setInputValue(e.target.value);
-                onSelectionChange(e.target.value);
+              },
+              onBlur: () => {
+                setValue(inputValue);
               },
             })}
           />
-          {/* </label> */}
           {isOpen && (
             <div className="autosuggest-list">
-              {labels
-                .map((label, index) => ({
-                  label,
-                  index,
-                  score: getMatchScore(inputValue, label),
-                }))
-                .filter(item => item.score > 0)
-                .sort((a, b) => b.score - a.score)
-                .slice(0, maxItems)
-                .map((item, index) => (
-                  <div
-                    key={item.index}
-                    {...getItemProps({
-                      item: item.label,
-                      index,
-                      className:
-                        highlightedIndex === index
-                          ? 'autosuggest-item-highlighted'
-                          : 'autosuggest-item',
-                    })}
-                  >
-                    {`${item.label.key} - ${item.label.value}`}
-                  </div>
-                ))}
+              {filteredLabels.map((item, index) => (
+                <div
+                  key={index}
+                  {...getItemProps({
+                    item: item.label,
+                    index,
+                    className:
+                      highlightedIndex === index
+                        ? 'autosuggest-item-highlighted'
+                        : 'autosuggest-item',
+                  })}
+                >
+                  {`${item.label.key} - ${item.label.value}`}
+                </div>
+              ))}
             </div>
           )}
         </div>