Clear methods to work with custom components

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"] });
+  })
+})

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);
 };