From 1e3f3eae8d60edd953ca3a7593c30185479a364a Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Mon, 24 Jan 2022 14:58:27 +0100
Subject: [PATCH] Removing collection fix (#1764)

* Pass combined choices to autocomplete handler

* Refactor autocomplete handler to use combined choices
---
 src/misc.ts                                                | 7 +++++++
 src/utils/handlers/multiAutocompleteSelectChangeHandler.ts | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/misc.ts b/src/misc.ts
index 55042fd12..e4e5ff255 100644
--- a/src/misc.ts
+++ b/src/misc.ts
@@ -1,9 +1,11 @@
 import { ThemeType } from "@saleor/macaw-ui";
+import uniqBy from "lodash/uniqBy";
 import moment from "moment-timezone";
 import { MutationFunction, MutationResult } from "react-apollo";
 import { IntlShape } from "react-intl";
 
 import { ConfirmButtonTransitionState } from "./components/ConfirmButton";
+import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelectField";
 import { StatusType } from "./components/StatusChip/types";
 import { StatusLabelProps } from "./components/StatusLabel";
 import { AddressType, AddressTypeInput } from "./customers/types";
@@ -469,3 +471,8 @@ export function PromiseQueue() {
 
   return { queue, add };
 }
+
+export const combinedMultiAutocompleteChoices = (
+  selected: MultiAutocompleteChoiceType[],
+  choices: MultiAutocompleteChoiceType[]
+) => uniqBy([...selected, ...choices], "value");
diff --git a/src/utils/handlers/multiAutocompleteSelectChangeHandler.ts b/src/utils/handlers/multiAutocompleteSelectChangeHandler.ts
index 8376727de..b7055b645 100644
--- a/src/utils/handlers/multiAutocompleteSelectChangeHandler.ts
+++ b/src/utils/handlers/multiAutocompleteSelectChangeHandler.ts
@@ -1,5 +1,6 @@
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
+import { combinedMultiAutocompleteChoices } from "@saleor/misc";
 import { toggle } from "@saleor/utils/lists";
 
 /**
@@ -14,8 +15,10 @@ function createMultiAutocompleteSelectHandler(
   return (event: ChangeEvent) => {
     change(event);
 
+    const combinedChoices = combinedMultiAutocompleteChoices(selected, choices);
+
     const id = event.target.value;
-    const choice = choices.find(choice => choice.value === id);
+    const choice = combinedChoices.find(choice => choice.value === id);
 
     setSelected(toggle(choice, selected, (a, b) => a.value === b.value));
   };