From 359e24ca8be427c4cc3e192b70d28d0ccd5eb03f Mon Sep 17 00:00:00 2001
From: Luis Henrique Kraus <luis.kraus@qualyteam.com.br>
Date: Sun, 21 Mar 2021 18:44:43 -0300
Subject: [PATCH] Add helper to remove one selected option

---
 README.md                           | 26 ++++++++++++++++++++++++++
 src/__tests__/select-event.test.tsx | 19 +++++++++++++++++++
 src/index.ts                        | 15 ++++++++++++++-
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a9d62ba..2b6525c 100644
--- a/README.md
+++ b/README.md
@@ -197,6 +197,32 @@ await selectEvent.clearAll(getByLabelText("Food"));
 expect(getByRole("form")).toHaveFormValues({ food: "" });
 ```
 
+### `clearOne(input: HTMLElement, option: string | RegExp): Promise<void>`
+
+Clear one selected value in the dropdown.
+
+```jsx
+const { getByRole, getByLabelText } = render(
+  <form role="form">
+    <label htmlFor="food">Food</label>
+    <Creatable
+      defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
+      options={OPTIONS}
+      name="food"
+      inputId="food"
+      isMulti
+    />
+  </form>
+);
+expect(getByRole("form")).toHaveFormValues({
+  food: ["chocolate", "vanilla", "strawberry"],
+});
+await selectEvent.clearOne(getByLabelText("Food"), "Vanilla");
+expect(getByRole("form")).toHaveFormValues({
+  food: ["chocolate", "strawberry"],
+});
+```
+
 ### `openMenu(input: HTMLElement): void`
 
 Opens the select dropdown menu by focusing the input and simulating a down arrow keypress.
diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx
index 338cd6a..f211605 100644
--- a/src/__tests__/select-event.test.tsx
+++ b/src/__tests__/select-event.test.tsx
@@ -302,6 +302,25 @@ describe("The select event helpers", () => {
     expect(form).toHaveFormValues({ food: "vanilla" });
   });
 
+  it("clear one item in a multi-select dropdown", async () => {
+    const { form, input } = renderForm(
+      <Creatable
+        {...defaultProps}
+        isMulti
+        defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
+      />
+    );
+    expect(form).toHaveFormValues({
+      food: ["chocolate", "vanilla", "strawberry"],
+    });
+
+    await selectEvent.clearOne(input, "Vanilla");
+
+    expect(form).toHaveFormValues({ 
+      food: ["chocolate", "strawberry"] 
+    });
+  });
+
   describe("when asynchronously generating the list of options", () => {
     // from https://github.com/JedWatson/react-select/blob/v3.0.0/docs/examples/CreatableAdvanced.js
     // mixed with Async Creatable Example from https://react-select.com/creatable
diff --git a/src/index.ts b/src/index.ts
index 6261758..0d51ae9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -156,5 +156,18 @@ export const clearAll = async (input: HTMLElement) => {
   await clear(input, clearAllButton);
 };
 
-const selectEvent = { select, create, clearFirst, clearAll, openMenu };
+/**
+ * Utility for clear one option, when has multiple options selected in a `react-select` dropdown.
+ * When find multiple options to remove it will remove the first occurrence
+ * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`) 
+ * @param {String|RegExp} option The display name(s) for the option(s) to  remove
+ */
+ export const clearOne = async (input: HTMLElement, option: string | RegExp) => {
+  const container = getReactSelectContainerFromInput(input);
+  const options = await findAllByText(container, option);
+  const clearButton = options[0].parentNode?.querySelector('svg[aria-hidden="true"]')!;
+  await clear(input, clearButton);
+};
+
+const selectEvent = { select, create, clearFirst, clearAll, clearOne, openMenu };
 export default selectEvent;