Merge pull request #580 from catho/QTM-775

fix(AutoComplete.jsx): Preventing auto complete from set a suggestion…
catho · Sep 2, 2024 · c246b23 · c246b23
2 parents 819e5ef + 2f5161e
commit c246b23
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/components/AutoComplete/AutoComplete.jsx b/components/AutoComplete/AutoComplete.jsx
@@ -17,6 +17,7 @@ import useKeyPress from './SubComponents/UseKeyPress';
 const ITEM_HEIGHT = '44px';
 const MAX_ITEMS_VISIBILITY = 7;
 const DROPITEM_FONT_SIZE = baseFontSize * 0.875;
+const NON_FOCUSABLE_SUGGESTION_INDEX = -1;
 
 const ComponentWrapper = styled.div`
   ${({
@@ -167,7 +168,7 @@ const AutoComplete = ({
     filterSuggestions.length,
   );
   const [showSuggestions, setShowSuggestions] = useState(false);
-  const [cursor, setCursor] = useState(-1);
+  const [cursor, setCursor] = useState(NON_FOCUSABLE_SUGGESTION_INDEX);
   const wrapperRef = useRef();
   const listOptions = useRef();
   const autoInputRef = useRef(null);
@@ -182,15 +183,18 @@ const AutoComplete = ({
     const input = wrapperRef.current?.children[1];
     if (input) {
       input.focus();
-      setCursor(-1);
+      setCursor(NON_FOCUSABLE_SUGGESTION_INDEX);
     }
   };
 
   const filterItems = (currentValue) =>
     suggestions.filter((suggestion) => {
       let option = normalizeChars(suggestion.toLowerCase());
       option = normalizeChars(option);
-      return option.indexOf(normalizeChars(currentValue.toLowerCase())) > -1;
+      return (
+        option.indexOf(normalizeChars(currentValue.toLowerCase())) >
+        NON_FOCUSABLE_SUGGESTION_INDEX
+      );
     });
 
   const handleFilter = (currentValue) => {
@@ -202,7 +206,7 @@ const AutoComplete = ({
   const handleChange = (currentValue) => {
     setUserTypedValue(currentValue);
     onChange(currentValue);
-    setCursor(-1);
+    setCursor(NON_FOCUSABLE_SUGGESTION_INDEX);
     handleFilter(currentValue);
   };
 
@@ -228,7 +232,7 @@ const AutoComplete = ({
     setUserTypedValue('');
     onChange('');
     setFilterSuggestions(suggestions);
-    setCursor(-1);
+    setCursor(NON_FOCUSABLE_SUGGESTION_INDEX);
   };
 
   const handleEscPress = ({ key }) => {
@@ -313,11 +317,11 @@ const AutoComplete = ({
 
   /* istanbul ignore next */
   useEffect(() => {
-    if (showSuggestions && tabPress) {
-      setUserTypedValue(filterSuggestions[cursor]);
-      onSelectedItem(filterSuggestions[cursor]);
-      setShowSuggestions(false);
-    } else if (tabPress) {
+    if (tabPress) {
+      if (showSuggestions && cursor !== NON_FOCUSABLE_SUGGESTION_INDEX) {
+        setUserTypedValue(filterSuggestions[cursor]);
+        onSelectedItem(filterSuggestions[cursor]);
+      }
       setShowSuggestions(false);
     }
   }, [tabPress]);