Fix currency autocomplete widget (#1865)

* bump downshift version

* Firther refactor for downshift bump

* Update tests

* Remove unnecessary id property

* Remove unnecessary !important

package-lock.json

@@ -10109,6 +10109,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
+      "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -11880,9 +11885,36 @@
       "dev": true
     },
     "downshift": {
-      "version": "1.31.16",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.16.tgz",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.7.tgz",
-      "integrity": "sha512-RskXmiGSoz0EHAyBrmTBGSLHg6+NYDGuLu2W3GpmuOe6hmZEWhCiQrq5g6DWzhnUaJD41xHbbfC6j1Fe86YqgA=="
+      "integrity": "sha512-cVprZg/9Lvj/uhYRxELzlu1aezRcgPWBjTvspiGTVEU64gF5pRdSRKFVLcxqsZC637cLAGMbL40JavEfWnqgNg==",
+      "requires": {
+        "@babel/runtime": "^7.14.8",
+        "compute-scroll-into-view": "^1.0.17",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.17.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
+          "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
     },
     "duplexer": {
       "version": "0.1.2",

package.json

@@ -41,7 +41,7 @@
     "crc-32": "^1.2.0",
     "currency-codes": "^2.1.0",
     "cypress-mailhog": "^1.3.0",
-    "downshift": "^1.31.16",
+    "downshift": "^6.1.7",
     "editorjs-inline-tool": "^0.4.0",
     "editorjs-undo": "^0.1.4",
     "faker": "^5.1.0",

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -110,10 +110,7 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
   return (
     <DebounceAutocomplete debounceFn={onInputChange}>
       {debounceFn => (
-        <Downshift
+        <Downshift onSelect={handleChange}>
-          itemToString={item => (item ? item.label : "")}
-          onSelect={handleChange}
-        >
           {({ getItemProps, isOpen, openMenu, closeMenu, selectItem }) => (
             <div
               className={classes.container}
@@ -130,6 +127,7 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
                     closeMenu();
                     setMenuPath([]);
                     setInputValue(displayValue || "");
+                    debounceFn("");
                   },
                   onChange: event => {
                     debounceFn(event.target.value);
@@ -156,7 +154,7 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
                         <MenuItem
                           component="div"
                           {...getItemProps({
-                            item: null
+                            item: "Back"
                           })}
                           onClick={() =>
                             setMenuPath(menuPath.slice(0, menuPath.length - 2))
@@ -171,10 +169,10 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
                         : options
                       ).map((suggestion, index) => (
                         <MenuItem
-                          data-test-id={testIds[index]}
+                          data-test-id={!!testIds ? testIds[index] : ""}
-                          key={suggestion.value}
+                          key={`${suggestion.value}:${index}`}
                           component="div"
-                          {...getItemProps({ item: suggestion })}
+                          {...getItemProps({ item: suggestion.value ?? "" })}
                           onClick={() =>
                             suggestion.value
                               ? selectItem(suggestion.value)

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -132,7 +132,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
 
   const handleSelect = (
     item: string,
-    downshiftOpts?: ControllerStateAndHelpers
+    downshiftOpts?: ControllerStateAndHelpers<string>
   ) => {
     if (downshiftOpts) {
       downshiftOpts.reset({ inputValue: "", isOpen: true });
@@ -165,6 +165,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
               getItemProps,
               isOpen,
               toggleMenu,
+              getMenuProps,
               highlightedIndex,
               inputValue
             }) => {
@@ -181,24 +182,26 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                 <div className={classes.container} {...rest}>
                   <TextField
                     InputProps={{
-                      ...getInputProps({
-                        placeholder
-                      }),
                       endAdornment: (
                         <div className={classes.adornment}>
                           {endAdornment}
                           <ArrowDropdownIcon />
                         </div>
                       ),
-                      id: undefined,
+                      ref: anchor,
                       onBlur,
-                      onClick: toggleMenu,
                       onFocus: () => {
                         if (fetchOnFocus) {
                           fetchChoices(inputValue);
                         }
-                      },
+                      }
-                      ref: anchor
+                    }}
+                    inputProps={{
+                      ...getInputProps({
+                        placeholder,
+                        onClick: toggleMenu
+                      }),
+                      ...getMenuProps()
                     }}
                     error={error}
                     helperText={helperText}

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -39,7 +39,7 @@ export interface MultiAutocompleteSelectFieldContentProps
   choices: MultiAutocompleteChoiceType[];
   displayCustomValue: boolean;
   displayValues: MultiAutocompleteChoiceType[];
-  getItemProps: (options: GetItemPropsOptions) => void;
+  getItemProps: (options: GetItemPropsOptions<string>) => any;
   highlightedIndex: number;
   inputValue: string;
 }

src/components/Navigator/NavigatorSection.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { QuickSearchAction } from "./types";
 
 interface NavigatorSectionProps {
-  getItemProps: (options: GetItemPropsOptions) => any;
+  getItemProps: (options: GetItemPropsOptions<QuickSearchAction>) => any;
   highlightedIndex: number;
   label: string;
   items: QuickSearchAction[];

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -105,7 +105,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
     <DebounceAutocomplete debounceFn={fetchChoices}>
       {debounceFn => (
         <Downshift
-          defaultInputValue={displayValue}
           itemToString={() => displayValue || ""}
           onInputValueChange={value => debounceFn(value)}
           onSelect={handleChange}
@@ -177,9 +176,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
 
             const commonInputProps = {
               ...InputProps,
-              ...getInputProps({
-                placeholder
-              }),
               endAdornment: (
                 <div className={classes.adornment}>
                   <ArrowDropdownIcon />
@@ -188,7 +184,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
               error,
               id: undefined,
               onBlur: handleBlur,
-              onClick: !disabled && toggleMenu,
               onFocus: () => {
                 if (fetchOnFocus) {
                   fetchChoices(inputValue);
@@ -213,6 +208,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                 <TextFieldComponent
                   {...nakedInputProps}
                   InputProps={commonInputProps}
+                  // Downshift doesn't seem to be fully compatible with MUI
+                  // https://github.com/downshift-js/downshift/issues/718
+                  inputProps={{
+                    ...getInputProps({
+                      placeholder,
+                      onClick: !disabled && toggleMenu
+                    })
+                  }}
                   error={error}
                   disabled={disabled}
                   helperText={helperText}

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -41,7 +41,7 @@ export interface SingleAutocompleteSelectFieldContentProps
   choices: Array<SingleAutocompleteChoiceType<string, string | JSX.Element>>;
   displayCustomValue: boolean;
   emptyOption: boolean;
-  getItemProps: (options: GetItemPropsOptions) => any;
+  getItemProps: (options: GetItemPropsOptions<string>) => any;
   highlightedIndex: number;
   inputValue: string;
   isCustomValueSelected: boolean;
@@ -94,7 +94,10 @@ const useStyles = makeStyles(
     },
     menuItem: {
       height: "auto",
-      whiteSpace: "normal"
+      whiteSpace: "normal",
+      '&[aria-selected="true"]': {
+        backgroundColor: theme.palette.background.default
+      }
     },
     progress: {},
     progressContainer: {