feat: add isClearable prop to Select and AsyncSelect (#1310)

cypress/e2e/components/AsyncSelect.spec.ts

@@ -26,16 +26,30 @@ describe("AsyncSelect", () => {
       getMultiselect().contains("Mexico");
     });
 
-    it("clears all selected values", () => {
-      getMultiselect().click();
+    describe("clears selected values", () => {
+      it("clears all multiselect values", () => {
+        getMultiselect().click();
 
-      cy.focused().type("cana");
-      assertDropDownIsOpen().contains("Canada");
-      cy.focused().type("{enter}");
+        cy.focused().type("cana");
+        assertDropDownIsOpen().contains("Canada");
+        cy.focused().type("{enter}");
+
+        getClearButton().click();
+
+        getMultiselect().contains("Select countries");
+      });
+
+      it("clears single-select values", () => {
+        getSelectComponent().click();
+
+        cy.focused().type("cana");
+        assertDropDownIsOpen().contains("Canada");
+        cy.focused().type("{enter}");
 
-      getClearButton().click();
+        getClearButton().click();
 
-      getMultiselect().contains("Please select a countries");
+        getMultiselect().contains("Select countries");
+      });
     });
 
     it("does not show the dropdown arrow", () => {

cypress/e2e/components/Select.spec.ts

@@ -129,6 +129,21 @@ describe("Select", () => {
     });
   });
 
+  describe("with clear button", () => {
+    beforeEach(() => {
+      cy.renderFromStorybook("select--with-a-clear-button");
+    });
+
+    it("clears single-select values", () => {
+      getSelectComponent().click();
+      cy.focused().type("{downarrow}").type("{enter}");
+
+      getClearButton().click();
+
+      getSelectComponent().contains("Please select inventory status");
+    });
+  });
+
   describe("with state", () => {
     beforeEach(() => {
       cy.renderFromStorybook("select--with-state");

src/AsyncSelect/AsyncSelect.story.tsx

@@ -59,7 +59,17 @@ export const WithDefaultOptions = () => (
     classNamePrefix="SelectTest"
     labelText="Country"
     onInputChange={action("typed input value changed")}
-    defaultOptions={northAmericanCountries}
+    isClearable
+    defaultOptions={[
+      {
+        value: "Canada",
+        label: "Canada",
+      },
+      {
+        value: "United States",
+        label: "United States",
+      },
+    ]}
     loadOptions={loadMatchingCountries}
   />
 );
@@ -88,7 +98,7 @@ WithADefaultValue.story = {
 
 export const Multiselect = () => (
   <AsyncSelect
-    placeholder="Please select a countries"
+    placeholder="Select countries"
     onChange={action("selection changed")}
     onBlur={action("blurred")}
     className="Select"
@@ -100,9 +110,19 @@ export const Multiselect = () => (
   />
 );
 
-Multiselect.story = {
-  name: "Multiselect",
-};
+export const WithAClearButton = () => (
+  <AsyncSelect
+    placeholder="Select countries"
+    onChange={action("selection changed")}
+    onBlur={action("blurred")}
+    className="Select"
+    classNamePrefix="SelectTest"
+    labelText="Countries"
+    isClearable
+    onInputChange={action("typed input value changed")}
+    loadOptions={loadMatchingCountries}
+  />
+);
 
 export const UsingRefToControlFocus = () => {
   const ref = useRef(null);

src/AsyncSelect/AsyncSelect.tsx

@@ -21,6 +21,7 @@ import { getSubset } from "../utils/subset";
 
 type AsyncSelectProps = {
   windowThreshold?: number;
+  isClearable?: boolean;
   filterOption?: (...args: any[]) => any;
   autocomplete?: boolean;
   disabled?: boolean;
@@ -92,6 +93,7 @@ const AsyncSelect = forwardRef(
       cacheOptions = false,
       defaultOptions,
       loadOptions,
+      isClearable,
       ...props
     }: AsyncSelectProps,
     ref
@@ -150,6 +152,7 @@ const AsyncSelect = forwardRef(
             cacheOptions={cacheOptions}
             defaultOptions={defaultOptions}
             loadOptions={loadOptions}
+            isClearable={isClearable}
           />
           <InlineValidation mt="x1" errorMessage={errorMessage} errorList={errorList} />
         </MaybeFieldLabel>

src/Select/Select.story.tsx

@@ -368,6 +368,18 @@ Required.story = {
   name: "set to required",
 };
 
+export const WithAClearButton = () => (
+  <Select
+    isClearable
+    placeholder="Please select inventory status"
+    options={options}
+    labelText="Inventory status"
+    onChange={action("selection changed")}
+    onBlur={action("blurred")}
+    onInputChange={action("typed input value changed")}
+  />
+);
+
 export const WithHelpText = () => (
   <Select
     placeholder="Please select inventory status"

src/Select/Select.tsx

@@ -65,6 +65,7 @@ export type SelectProps = {
   closeMenuOnSelect?: boolean;
   "aria-label"?: string;
   size?: ComponentSize;
+  isClearable?: boolean;
   [key: string]: any; // Allow for custom props to be passed and used inside custom components using the `selectProps` prop
 };