feat(Select): Add ability to remove clear button

Royal-Navy · Jun 10, 2021 · e95c0c8 · e95c0c8
1 parent 718349b
commit e95c0c8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/packages/react-component-library/src/components/Select/Select.stories.tsx b/packages/react-component-library/src/components/Select/Select.stories.tsx
@@ -49,6 +49,18 @@ export const Disabled: Story<SelectProps> = (props) => (
 
 Disabled.storyName = 'Disabled'
 
+export const NotClearable: Story<SelectProps> = (props) => (
+  <Select
+    {...props}
+    options={options}
+    label="Example label"
+    name="select-disabled"
+    isClearable={false}
+  />
+)
+
+NotClearable.storyName = 'Not clearable'
+
 export const WithIcons: Story<SelectProps> = (props) => {
   const iconOptions = options.map((option) => ({
     ...option,

diff --git a/packages/react-component-library/src/components/Select/Select.test.tsx b/packages/react-component-library/src/components/Select/Select.test.tsx
@@ -85,6 +85,16 @@ describe('Select', () => {
           wrapper.getByText('Option 1').click()
         })
 
+        it('should render a clear button', () => {
+          const control = wrapper.container.children[0].children[1]
+          const indicators = control.children[1]
+          const firstIndicator = indicators.children[0]
+
+          expect(firstIndicator.classList).toContain(
+            'rn-select__clear-indicator'
+          )
+        })
+
         it('should render the select with the selected value', () => {
           return waitFor(() => {
             expect(
@@ -195,4 +205,41 @@ describe('Select', () => {
       })
     })
   })
+
+  describe('when `isClearable` is `false`', () => {
+    beforeEach(() => {
+      onChangeSpy = jest.fn()
+
+      wrapper = render(
+        <Select isClearable={false} onChange={onChangeSpy} options={options} />
+      )
+    })
+
+    describe('when the select is clicked', () => {
+      beforeEach(() => {
+        const input = wrapper.getByTestId('react-select-vendor-input')
+        fireEvent.focus(input)
+        fireEvent.keyDown(input, {
+          key: 'ArrowDown',
+          code: 40,
+        })
+      })
+
+      describe('when the first option is clicked', () => {
+        beforeEach(() => {
+          wrapper.getByText('Option 1').click()
+        })
+
+        it('should not render a clear button', () => {
+          const control = wrapper.container.children[0].children[1]
+          const indicators = control.children[1]
+          const firstIndicator = indicators.children[0]
+
+          expect(firstIndicator.classList).not.toContain(
+            'rn-select__clear-indicator'
+          )
+        })
+      })
+    })
+  })
 })
diff --git a/packages/react-component-library/src/components/Select/Select.tsx b/packages/react-component-library/src/components/Select/Select.tsx
@@ -18,6 +18,10 @@ export interface SelectProps
   extends ReactSelectProps<any>,
     ComponentWithClass,
     InputValidationProps {
+  /**
+   * Specify whether or not to have a clear button.
+   */
+  isClearable?: boolean
   /**
    * Optional text label to display within the component.
    */
@@ -41,6 +45,7 @@ export interface SelectProps
 }
 
 export const Select: React.FC<SelectProps> = ({
+  isClearable = true,
   label,
   name,
   onChange,
@@ -79,7 +84,7 @@ export const Select: React.FC<SelectProps> = ({
         MenuList: StyledMenuList,
         ValueContainer: StyledValueContainer,
       }}
-      isClearable
+      isClearable={isClearable}
       name={name}
       onChange={onSelectChange}
       options={options}