From 3669f45061670829ac74648bb42b5407b7cfe09c Mon Sep 17 00:00:00 2001
From: Endo <endo_aki22@outlook.com>
Date: Tue, 20 Dec 2022 06:18:50 -0700
Subject: [PATCH] replace filter method from fuzzaldrin with native filter
 method of javascript to fix country select issue #2751 (#2772)

* replace filter method from fuzzaldrin with native filter method of javascript to fix country select issue #2751

* added fuse.js and replace filter of fuzzaldrin with search of fuse.js to fix country select issue #2751

* use original array if query is empty in SingleAutocompleteSelectField, not use fusejs result
---
 package-lock.json                             | 32 +++++++++++++------
 package.json                                  |  1 +
 .../SingleAutocompleteSelectField.tsx         |  8 ++---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e9d55328d..92002e212 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "faker": "^5.1.0",
         "fast-array-diff": "^0.2.0",
         "find-test-names": "^1.17.1",
+        "fuse.js": "^6.6.2",
         "fuzzaldrin": "^2.1.0",
         "graphql": "^15.4.0",
         "hotkeys-js": "^3.8.1",
@@ -9324,6 +9325,15 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "optional": true
     },
+    "node_modules/@storybook/ui/node_modules/fuse.js": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
+      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@storybook/ui/node_modules/react": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
@@ -21914,12 +21924,11 @@
       }
     },
     "node_modules/fuse.js": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
-      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
-      "optional": true,
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
     "node_modules/fuzzaldrin": {
@@ -51560,6 +51569,12 @@
           "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
           "optional": true
         },
+        "fuse.js": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
+          "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
+          "dev": true
+        },
         "react": {
           "version": "16.14.0",
           "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
@@ -61539,10 +61554,9 @@
       "devOptional": true
     },
     "fuse.js": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-3.6.1.tgz",
-      "integrity": "sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==",
-      "optional": true
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
     },
     "fuzzaldrin": {
       "version": "2.1.0",
diff --git a/package.json b/package.json
index 78688d7ba..c973bfda1 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "faker": "^5.1.0",
     "fast-array-diff": "^0.2.0",
     "find-test-names": "^1.17.1",
+    "fuse.js": "^6.6.2",
     "fuzzaldrin": "^2.1.0",
     "graphql": "^15.4.0",
     "hotkeys-js": "^3.8.1",
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index 70bb8714f..91aeb0283 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -11,7 +11,7 @@ import { ChevronIcon } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import clsx from "clsx";
 import Downshift from "downshift";
-import { filter } from "fuzzaldrin";
+import Fuse from "fuse.js";
 import React from "react";
 
 import Debounce, { DebounceProps } from "../Debounce";
@@ -298,12 +298,12 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
     );
   }
 
+  const fuse = new Fuse(choices, { keys: ["label"] });
+
   return (
     <SingleAutocompleteSelectFieldComponent
       fetchChoices={q => setQuery(q || "")}
-      choices={filter(choices, query, {
-        key: "label",
-      })}
+      choices={query !== "" ? fuse.search(query).map(v => v.item) : choices}
       {...rest}
     />
   );