From 8ba6c0158463afa95d38cdd1375297538d37b165 Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>
Date: Wed, 10 Aug 2022 19:55:43 -0700
Subject: [PATCH] fix: select: fixes select clear when items are toggled (#300)
* fix: select: fixes select clear when items are toggled
* chore: adds select uts
(cherry picked from commit 72ba459c59881d8aa3edce0e89294878accca3d0)
---
src/components/Select/Select.test.tsx | 62 +++++++++++++++++++
src/components/Select/Select.tsx | 43 ++++++-------
src/components/Select/select.module.scss | 6 +-
.../__snapshots__/Select.stories.storyshot | 9 +++
4 files changed, 96 insertions(+), 24 deletions(-)
create mode 100644 src/components/Select/Select.test.tsx
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
new file mode 100644
index 000000000..2b58eaafd
--- /dev/null
+++ b/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(
+
+ );
+ 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();
+ expect(wrapper.find('.select-large')).toBeTruthy();
+ });
+
+ test('Select is medium', () => {
+ const wrapper = mount();
+ expect(wrapper.find('.select-medium')).toBeTruthy();
+ });
+
+ test('Select is small', () => {
+ const wrapper = mount();
+ expect(wrapper.find('.select-small')).toBeTruthy();
+ });
+});
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 682623216..4aaa4d839 100644
--- a/src/components/Select/Select.tsx
+++ b/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 = 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 = 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 = 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 = React.forwardRef(
shape={selectShapeToTextInputShapeMap.get(shape)}
size={selectSizeToTextInputSizeMap.get(size)}
value={
- getSelectedOptionText() && !dropdownVisible
+ !dropdownVisible
? getSelectedOptionText()
: undefined
}
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
index 505a36acc..3b83ecd62 100644
--- a/src/components/Select/select.module.scss
+++ b/src/components/Select/select.module.scss
@@ -55,19 +55,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;
diff --git a/src/src/components/Select/__snapshots__/Select.stories.storyshot b/src/src/components/Select/__snapshots__/Select.stories.storyshot
index 5a889c1a6..29bb7df83 100644
--- a/src/src/components/Select/__snapshots__/Select.stories.storyshot
+++ b/src/src/components/Select/__snapshots__/Select.stories.storyshot
@@ -39,6 +39,7 @@ exports[`Storyshots Select Basic 1`] = `
role="textbox"
tabIndex={0}
type="text"
+ value=""
/>