fix: select: fixes select clear when items are toggled

src/components/Select/Select.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { SelectSize } from './Select.types';
+import { Select, SelectOption } from './';
+import { fireEvent, render } from '@testing-library/react';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+describe('Select', () => {
+    beforeAll(() => {
+        matchMedia = new MatchMediaMock();
+    });
+
+    afterEach(() => {
+        matchMedia.clear();
+    });
+
+    test('Select clearable', () => {
+        const defaultOptions: SelectOption[] = [
+            {
+                text: 'School',
+                value: 'school',
+            },
+        ];
+        const { container } = render(
+            <Select
+                defaultValue="school"
+                options={defaultOptions}
+                textInputProps={{
+                    defaultValue: 'school',
+                    clearable: true,
+                }}
+            />
+        );
+        expect(
+            (container.querySelector('.select-input') as HTMLInputElement).value
+        ).toBe('School');
+        fireEvent.click(container.querySelector('.clear-icon-button'));
+        expect(
+            (container.querySelector('.select-input') as HTMLInputElement).value
+        ).toBe('');
+    });
+
+    test('Select is large', () => {
+        const wrapper = mount(<Select size={SelectSize.Large} />);
+        expect(wrapper.find('.select-large')).toBeTruthy();
+    });
+
+    test('Select is medium', () => {
+        const wrapper = mount(<Select size={SelectSize.Medium} />);
+        expect(wrapper.find('.select-medium')).toBeTruthy();
+    });
+
+    test('Select is small', () => {
+        const wrapper = mount(<Select size={SelectSize.Small} />);
+        expect(wrapper.find('.select-small')).toBeTruthy();
+    });
+});

src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect, Ref } from 'react';
+import React, { FC, useEffect, useState, Ref } from 'react';
 
 import { mergeClasses } from '../../shared/utilities';
 import { Dropdown } from '../Dropdown';
@@ -124,16 +124,13 @@ export const Select: FC<SelectProps> = React.forwardRef(
         };
 
         const onInputClear = (): void => {
-            if (filterable && dropdownVisible) {
-                setSearchQuery('');
-            } else {
-                setOptions(
-                    options.map((opt) => ({
-                        ...opt,
-                        selected: false,
-                    }))
-                );
-            }
+            setSearchQuery('');
+            setOptions(
+                options.map((opt) => ({
+                    ...opt,
+                    selected: false,
+                }))
+            );
         };
 
         const onInputChange = (
@@ -192,24 +189,24 @@ export const Select: FC<SelectProps> = React.forwardRef(
         const componentClasses: string = mergeClasses([
             styles.selectWrapper,
             {
-                [styles.selectSize3]:
+                [styles.selectSmall]:
                     size === SelectSize.Flex && largeScreenActive,
             },
             {
-                [styles.selectSize2]:
+                [styles.selectMedium]:
                     size === SelectSize.Flex && mediumScreenActive,
             },
             {
-                [styles.selectSize2]:
+                [styles.selectMedium]:
                     size === SelectSize.Flex && smallScreenActive,
             },
             {
-                [styles.selectSize1]:
+                [styles.selectSmall]:
                     size === SelectSize.Flex && xSmallScreenActive,
             },
-            { [styles.selectSize1]: size === SelectSize.Large },
-            { [styles.selectSize2]: size === SelectSize.Medium },
-            { [styles.selectSize3]: size === SelectSize.Small },
+            { [styles.selectLarge]: size === SelectSize.Large },
+            { [styles.selectMedium]: size === SelectSize.Medium },
+            { [styles.selectSmall]: size === SelectSize.Small },
             classNames,
         ]);
 
@@ -326,8 +323,12 @@ export const Select: FC<SelectProps> = React.forwardRef(
             if (showPills()) {
                 return undefined;
             }
-            const selectedOption = options.find((option) => option.selected);
-            return selectedOption?.text;
+            const selectedOption = options
+                .filter((option: SelectOption) => option.selected)
+                .map((option: SelectOption) => option.text)
+                .join(', ')
+                .toLocaleString();
+            return selectedOption;
         };
 
         const selectInputProps: TextInputProps = {
@@ -387,7 +388,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
                             shape={selectShapeToTextInputShapeMap.get(shape)}
                             size={selectSizeToTextInputSizeMap.get(size)}
                             value={
-                                getSelectedOptionText() && !dropdownVisible
+                                !dropdownVisible
                                     ? getSelectedOptionText()
                                     : undefined
                             }

src/components/Select/select.module.scss

@@ -54,19 +54,19 @@
         color: var(--primary-color-80);
     }
 
-    &.select-size-1 {
+    &.select-large {
         .multi-select-pills {
             top: 7px;
         }
     }
 
-    &.select-size-2 {
+    &.select-medium {
         .multi-select-pills {
             top: 5px;
         }
     }
 
-    &.select-size-3 {
+    &.select-small {
         .multi-select-pills {
             top: 4px;
 

src/src/components/Select/__snapshots__/Select.stories.storyshot

@@ -39,6 +39,7 @@ exports[`Storyshots Select Basic 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -115,6 +116,7 @@ exports[`Storyshots Select Disabled 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -189,6 +191,7 @@ exports[`Storyshots Select Dynamic 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -265,6 +268,7 @@ exports[`Storyshots Select Filterable 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -341,6 +345,7 @@ exports[`Storyshots Select Multiple 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -417,6 +422,7 @@ exports[`Storyshots Select Multiple With No Filter 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -493,6 +499,7 @@ exports[`Storyshots Select Options Disabled 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -569,6 +576,7 @@ exports[`Storyshots Select With Clear 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"
@@ -645,6 +653,7 @@ exports[`Storyshots Select With Default Value 1`] = `
             role="textbox"
             tabIndex={0}
             type="text"
+            value=""
           />
           <div
             className="icon-wrapper right-icon"