From 9a20824b499ec3087a21a9e3f50f6e36c57bc451 Mon Sep 17 00:00:00 2001
From: "Amir.Tugi@Gmail.com" <Amir.T@logz.io>
Date: Sat, 9 Jan 2021 15:14:58 +0200
Subject: [PATCH 1/2] Make clear methods to work on every component based on
 the react-select component

---
 src/__tests__/select-event.test.tsx | 48 +++++++++++++++++++++++++++--
 src/index.ts                        | 12 ++++----
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx
index 434ead8..f5640f7 100644
--- a/src/__tests__/select-event.test.tsx
+++ b/src/__tests__/select-event.test.tsx
@@ -3,7 +3,7 @@ import "@testing-library/jest-dom/extend-expect";
 import { fireEvent, render } from "@testing-library/react";
 
 import React from "react";
-import Select from "react-select";
+import Select, { components } from "react-select";
 import selectEvent from "..";
 
 let Async: any;
@@ -232,7 +232,7 @@ describe("The select event helpers", () => {
       <Select {...defaultProps} defaultValue={OPTIONS[0]} isClearable />
     );
     expect(form).toHaveFormValues({ food: "chocolate" });
-    await selectEvent.clearFirst(input);
+    await selectEvent.clearAll(input);
     expect(form).toHaveFormValues({ food: "" });
   });
 
@@ -241,7 +241,7 @@ describe("The select event helpers", () => {
       <Select {...defaultProps} defaultValue={OPTIONS[0]} isClearable />
     );
     expect(form).toHaveFormValues({ food: "chocolate" });
-    await selectEvent.clearFirst(input);
+    await selectEvent.clearAll(input);
     expect(form).toHaveFormValues({ food: "" });
     await selectEvent.select(input, "Chocolate");
     expect(form).toHaveFormValues({ food: "chocolate" });
@@ -420,3 +420,45 @@ describe("The select event helpers", () => {
     });
   });
 });
+
+describe("Custom components", () => {
+  const MultiValueRemove = (props: any) => <components.MultiValueRemove {...props}><span>X</span></components.MultiValueRemove>
+  const ClearIndicator = (props: any) => <components.ClearIndicator {...props}><span>X</span></components.ClearIndicator>
+
+  it('clears all the items', async () => {
+    const { form, input } = renderForm(
+      <Creatable
+        {...defaultProps}
+        isMulti
+        defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
+        components={{
+          ClearIndicator,
+        }}
+      />
+    );
+    expect(form).toHaveFormValues({
+      food: ["chocolate", "vanilla", "strawberry"],
+    });
+
+    await selectEvent.clearAll(input);
+    expect(form).toHaveFormValues({ food: "" });
+  })
+  it('clears the first item', async () => {
+    const { form, input } = renderForm(
+      <Creatable
+        {...defaultProps}
+        isMulti
+        defaultValue={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
+        components={{
+          MultiValueRemove,
+        }}
+      />
+    );
+    expect(form).toHaveFormValues({
+      food: ["chocolate", "vanilla", "strawberry"],
+    });
+
+    await selectEvent.clearFirst(input);
+    expect(form).toHaveFormValues({ food: ["vanilla", "strawberry"] });
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index 554fb1c..bda8769 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -127,8 +127,9 @@ export const create = async (
  */
 export const clearFirst = async (input: HTMLElement) => {
   const container = getReactSelectContainerFromInput(input);
-  // The "clear" button is the first svg element that is hidden to screen readers
-  const clearButton = container.querySelector('svg[aria-hidden="true"]')!;
+  // The "clear" button is constructed from the user-defined `${classNamePrefix}__multi-value__remove`.
+  // This is built from the internal util `cx` of react-select, so we take advantage of the attribute selector here.
+  const clearButton = container.querySelector('[class$="multi-value__remove"]')!;
   await clear(input, clearButton);
 };
 
@@ -138,10 +139,9 @@ export const clearFirst = async (input: HTMLElement) => {
  */
 export const clearAll = async (input: HTMLElement) => {
   const container = getReactSelectContainerFromInput(input);
-  // The "clear all" button is the penultimate svg element that is hidden to screen readers
-  // (the last one is the dropdown arrow)
-  const elements = container.querySelectorAll('svg[aria-hidden="true"]');
-  const clearAllButton = elements[elements.length - 2];
+  // The "clear all" button is constructed from the user-defined `${classNamePrefix}__multi-value__remove`.
+  // This is built from the internal util `cx` of react-select, so we take advantage of the attribute selector here.
+  const clearAllButton = container.querySelector('[class*="clear-indicator"]')!;
   await clear(input, clearAllButton);
 };
 

From 205a3499ebd0dacd1e6d1134165ce92936d5e25d Mon Sep 17 00:00:00 2001
From: "Amir.Tugi@Gmail.com" <Amir.T@logz.io>
Date: Sat, 9 Jan 2021 16:10:07 +0200
Subject: [PATCH 2/2] Adjust multi value remove to be includes rather ends with

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index bda8769..035e85d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -129,7 +129,7 @@ export const clearFirst = async (input: HTMLElement) => {
   const container = getReactSelectContainerFromInput(input);
   // The "clear" button is constructed from the user-defined `${classNamePrefix}__multi-value__remove`.
   // This is built from the internal util `cx` of react-select, so we take advantage of the attribute selector here.
-  const clearButton = container.querySelector('[class$="multi-value__remove"]')!;
+  const clearButton = container.querySelector('[class*="multi-value__remove"]')!;
   await clear(input, clearButton);
 };