From ff44708b1d76b30fd21649e542a9075874028143 Mon Sep 17 00:00:00 2001
From: jameswilddev <jameswilddev@outlook.com>
Date: Thu, 25 Nov 2021 15:24:23 +0000
Subject: [PATCH] Improve submit functionality.

---
 .../index.tsx                                 |  21 ++-
 .../unit.tsx                                  | 129 +++++++++++++++++-
 2 files changed, 143 insertions(+), 7 deletions(-)

diff --git a/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/index.tsx b/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/index.tsx
index 32893e29..0f71d1c2 100644
--- a/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/index.tsx
+++ b/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/index.tsx
@@ -208,14 +208,25 @@ export const createSearchableMultiSelectChildrenComponent = <
             const normalizedParsed = normalize(parsed);
 
             if (normalizedParsed !== ``) {
-              const filteredOptions = sortedOptions.filter(
-                ({ label, value }) =>
-                  !values.includes(value) &&
-                  normalize(label).includes(normalizedParsed)
+              const filteredOptions = sortedOptions.filter(({ label }) =>
+                normalize(label).includes(normalizedParsed)
               );
 
               if (filteredOptions.length > 0) {
-                onChange([...values, filteredOptions[0]?.value as T]);
+                const firstMatchingOption = filteredOptions[0] as {
+                  readonly value: T;
+                };
+
+                const index = values.indexOf(firstMatchingOption.value);
+
+                if (index === -1) {
+                  onChange([...values, firstMatchingOption.value]);
+                } else {
+                  const valuesCopy = [...values];
+                  valuesCopy.splice(index, 1);
+
+                  onChange(valuesCopy);
+                }
               }
             }
 
diff --git a/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/unit.tsx b/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/unit.tsx
index f7f8c74c..0e2f371c 100644
--- a/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/unit.tsx
+++ b/components/createSearchableMultiSelectComponent/createSearchableMultiSelectChildrenComponent/unit.tsx
@@ -971,7 +971,7 @@ test(`closes the select when submitting without any input`, () => {
   expect(stub).not.toHaveBeenCalled();
 });
 
-test(`selects the first matching deselected item on submitting`, () => {
+test(`selects the first matching item on submitting`, () => {
   const Component = createSearchableMultiSelectChildrenComponent<TestValue>({
     fontFamily: `Example Font Family`,
     fontSize: 37,
@@ -1096,7 +1096,132 @@ test(`selects the first matching deselected item on submitting`, () => {
   expect(stub).not.toHaveBeenCalled();
 });
 
-test(`closes the select when submitting without deselected matches`, () => {
+test(`deselects the first matching item on submitting`, () => {
+  const Component = createSearchableMultiSelectChildrenComponent<TestValue>({
+    fontFamily: `Example Font Family`,
+    fontSize: 37,
+    paddingVertical: 12,
+    paddingHorizontal: 29,
+    blurredValid: {
+      textColor: `#FFEE00`,
+      placeholderColor: `#E7AA32`,
+      backgroundColor: `#32AE12`,
+      radius: 5,
+      border: {
+        width: 4,
+        color: `#FF00FF`,
+      },
+    },
+    blurredInvalid: {
+      textColor: `#99FE88`,
+      placeholderColor: `#CACA3A`,
+      backgroundColor: `#259284`,
+      radius: 10,
+      border: {
+        width: 6,
+        color: `#9A9A8E`,
+      },
+    },
+    focusedValid: {
+      textColor: `#55EA13`,
+      placeholderColor: `#273346`,
+      backgroundColor: `#CABA99`,
+      radius: 3,
+      border: {
+        width: 5,
+        color: `#646464`,
+      },
+    },
+    focusedInvalid: {
+      textColor: `#ABAADE`,
+      placeholderColor: `#47ADAD`,
+      backgroundColor: `#32AA88`,
+      radius: 47,
+      border: {
+        width: 12,
+        color: `#98ADAA`,
+      },
+    },
+    disabledValid: {
+      textColor: `#AE2195`,
+      placeholderColor: `#FFAAEE`,
+      backgroundColor: `#772728`,
+      radius: 100,
+      border: {
+        width: 14,
+        color: `#5E5E5E`,
+      },
+    },
+    disabledInvalid: {
+      textColor: `#340297`,
+      placeholderColor: `#233832`,
+      backgroundColor: `#938837`,
+      radius: 2,
+      border: {
+        width: 19,
+        color: `#573829`,
+      },
+    },
+  });
+  const onChange = jest.fn();
+  const close = jest.fn();
+  const stub = jest.fn();
+
+  const renderer = TestRenderer.create(
+    <Component
+      options={[
+        {
+          value: 10,
+          label: `Example Option A Label`,
+        },
+        {
+          value: 20,
+          label: `Example Option D Label`,
+        },
+        {
+          value: 40,
+          label: `Example Option F Label`,
+        },
+        {
+          value: 110,
+          label: `Example Option H Label`,
+        },
+        {
+          value: 90,
+          label: `Example Option G \t RED \r apple \n Label`,
+        },
+        {
+          value: 60,
+          label: `Example Option B  \n \n \r red \t \r APPLE \n \r \t Label`,
+        },
+        {
+          value: 30,
+          label: `Example Option C Label`,
+        },
+      ]}
+      values={[50, 20, 60, 30]}
+      placeholder="Example Placeholder"
+      onChange={onChange}
+      close={close}
+      noMatchesText="Example No Matches Text"
+    />
+  );
+
+  (
+    (renderer.toTree() as TestRenderer.ReactTestRendererTree)
+      .rendered as TestRenderer.ReactTestRendererTree
+  ).props[`children`][1].props.onSubmit(
+    `  \n  \t \r  ReD    \n \n \r \t  APPle \t \n \r`
+  );
+
+  renderer.unmount();
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenCalledWith([50, 20, 30]);
+  expect(close).toHaveBeenCalledTimes(1);
+  expect(stub).not.toHaveBeenCalled();
+});
+
+test(`closes the select when submitting without matches`, () => {
   const Component = createSearchableMultiSelectChildrenComponent<TestValue>({
     fontFamily: `Example Font Family`,
     fontSize: 37,