ensure dropdownScroll callback is called on up/down key press

Author: Tom Hutman

src/components/AutoCompleteTextarea/List.js

@@ -24,7 +24,7 @@ const List = (props) => {
 
   const [selectedItem, setSelectedItem] = useState(undefined);
 
-  const itemsRef = {};
+  const itemsRef = [];
 
   const isSelected = (item) => selectedItem === values.indexOf(item);
 
@@ -53,24 +53,29 @@ const List = (props) => {
     modifyText(values[selectedItem]);
   };
 
-  const selectItem = (item, keyboard = false) => {
+  const selectItem = (item) => {
     setSelectedItem(values.indexOf(item));
-    if (keyboard) dropdownScroll(itemsRef[getId(item)]);
   };
 
   const handleKeyDown = useCallback(
     (event) => {
       if (event.which === KEY_CODES.UP) {
         setSelectedItem((prevSelected) => {
           if (prevSelected === undefined) return 0;
-          return prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+          const newID =
+            prevSelected === 0 ? values.length - 1 : prevSelected - 1;
+          dropdownScroll(itemsRef[newID]);
+          return newID;
         });
       }
 
       if (event.which === KEY_CODES.DOWN) {
         setSelectedItem((prevSelected) => {
           if (prevSelected === undefined) return 0;
-          return prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+          const newID =
+            prevSelected === values.length - 1 ? 0 : prevSelected + 1;
+          dropdownScroll(itemsRef[newID]);
+          return newID;
         });
       }
 
@@ -123,7 +128,7 @@ const List = (props) => {
           __html: renderHeader(propValue),
         }}
       />
-      {values.map((item) => (
+      {values.map((item, i) => (
         <Item
           className={itemClassName}
           component={component}
@@ -132,7 +137,7 @@ const List = (props) => {
           onClickHandler={handleClick}
           onSelectHandler={selectItem}
           ref={(ref) => {
-            itemsRef[getId(item)] = ref;
+            itemsRef[i] = ref;
           }}
           selected={isSelected(item)}
           style={itemStyle}