From d6a7d1650a307c64c85c0cb895ff3b4c2acf02eb Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 15 Jan 2021 09:47:45 -0700 Subject: [PATCH 1/5] Allow an EuiSelect[hasNoInitialSelection]'s value to be reset with an undefined --- src/components/form/select/select.test.tsx | 81 +++++++++++++++++++--- src/components/form/select/select.tsx | 6 +- 2 files changed, 78 insertions(+), 9 deletions(-) diff --git a/src/components/form/select/select.test.tsx b/src/components/form/select/select.test.tsx index e7e33eaea36..0b0409fea09 100644 --- a/src/components/form/select/select.test.tsx +++ b/src/components/form/select/select.test.tsx @@ -16,9 +16,10 @@ * specific language governing permissions and limitations * under the License. */ +/* eslint-disable no-irregular-whitespace */ import React from 'react'; -import { render } from 'enzyme'; +import { render, mount } from 'enzyme'; import { requiredProps } from '../../../test/required_props'; import { EuiSelect } from './select'; @@ -31,7 +32,7 @@ jest.mock('../validatable_control', () => ({ })); describe('EuiSelect', () => { - test('is rendered', () => { + it('is rendered', () => { const component = render( ); @@ -40,7 +41,7 @@ describe('EuiSelect', () => { }); describe('props', () => { - test('options are rendered', () => { + it('options are rendered', () => { const component = render( { expect(component).toMatchSnapshot(); }); - test('isInvalid is rendered', () => { + it('isInvalid is rendered', () => { const component = render(); expect(component).toMatchSnapshot(); }); - test('fullWidth is rendered', () => { + it('fullWidth is rendered', () => { const component = render(); expect(component).toMatchSnapshot(); }); - test('isLoading is rendered', () => { + it('isLoading is rendered', () => { const component = render(); expect(component).toMatchSnapshot(); }); - test('disabled options are rendered', () => { + it('disabled options are rendered', () => { const component = render( { expect(component).toMatchSnapshot(); }); - test('value option is rendered', () => { + it('value option is rendered', () => { const component = render( { expect(component).toMatchSnapshot(); }); }); + + describe('hasNoInitialSelection', () => { + it('renders with an extra option at the top', () => { + const component = mount( + {}} + /> + ); + + expect(component.find('option').length).toBe(3); + expect(component.find('option').at(0)).toMatchInlineSnapshot(` + +`); + }); + + it('can be reset to an empty initial selection', () => { + const component = mount( + {}} + /> + ); + + expect( + component.find('select').getDOMNode().value + ).toBe('1'); + + component.setProps({ value: '' }); + expect( + component.find('select').getDOMNode().value + ).toBe(''); + + component.setProps({ value: '1' }); + expect( + component.find('select').getDOMNode().value + ).toBe('1'); + + component.setProps({ value: undefined }); + expect( + component.find('select').getDOMNode().value + ).toBe(''); + }); + }); }); diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx index 653c4fb8317..89324c6f0af 100644 --- a/src/components/form/select/select.tsx +++ b/src/components/form/select/select.tsx @@ -83,12 +83,16 @@ export const EuiSelect: FunctionComponent = ({ hasNoInitialSelection = false, defaultValue, compressed = false, - value, + value: _value, prepend, append, onMouseUp, ...rest }) => { + // if this is injecting an empty option for `hasNoInitialSelection` then + // value needs to fallback to an empty string to interact properly with `defaultValue` + const value = hasNoInitialSelection ? _value ?? '' : _value; + const handleMouseUp = (e: React.MouseEvent) => { // Normalizes cross-browser mouse eventing by preventing propagation, // notably for use in conjunction with EuiOutsideClickDetector. From 53ce68742ed72cdd7416a010034b20cb179763eb Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 15 Jan 2021 10:08:02 -0700 Subject: [PATCH 2/5] changelog --- CHANGELOG.md | 1 + src-docs/src/views/form_controls/select.js | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d87d58cab6..cbc4754a0fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added a `size` prop to `EuiContextMenu` and added a smaller size ([#4409](https://github.com/elastic/eui/pull/4409)) +- Allowed visual state of `EuiSelect` with `hasNoInitialSelection` to be reset with `value={undefined}` ([#4428](https://github.com/elastic/eui/pull/4428)) ## [`31.2.0`](https://github.com/elastic/eui/tree/v31.2.0) diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js index b8b7f96183d..37569ce8c6f 100644 --- a/src-docs/src/views/form_controls/select.js +++ b/src-docs/src/views/form_controls/select.js @@ -10,16 +10,21 @@ export default () => { { value: 'option_three', text: 'Option three' }, ]; - const [value, setValue] = useState(options[1].value); + const [value, setValue] = useState(undefined); const onChange = (e) => { setValue(e.target.value); }; + window.asdf = () => { + setValue(undefined); + } + return ( /* DisplayToggles wrapper for Docs only */ Date: Fri, 15 Jan 2021 11:22:48 -0700 Subject: [PATCH 3/5] Update CHANGELOG.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbc4754a0fa..e42cbddd0c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added a `size` prop to `EuiContextMenu` and added a smaller size ([#4409](https://github.com/elastic/eui/pull/4409)) -- Allowed visual state of `EuiSelect` with `hasNoInitialSelection` to be reset with `value={undefined}` ([#4428](https://github.com/elastic/eui/pull/4428)) +- Removed selected item of `EuiSelect` when `hasNoInitialSelection=true` and value reset to `undefined` ([#4428](https://github.com/elastic/eui/pull/4428)) ## [`31.2.0`](https://github.com/elastic/eui/tree/v31.2.0) From de129c90b0e72291c0ddd4328abac7e76a9a1180 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 15 Jan 2021 11:23:48 -0700 Subject: [PATCH 4/5] remove testing code --- src-docs/src/views/form_controls/select.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js index 37569ce8c6f..8c39e4e97e1 100644 --- a/src-docs/src/views/form_controls/select.js +++ b/src-docs/src/views/form_controls/select.js @@ -16,10 +16,6 @@ export default () => { setValue(e.target.value); }; - window.asdf = () => { - setValue(undefined); - } - return ( /* DisplayToggles wrapper for Docs only */ From b065413ca408cab090933544de941e0535c88ea7 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 19 Jan 2021 10:22:21 -0700 Subject: [PATCH 5/5] Revert all modifications to form_controls/select.js example --- src-docs/src/views/form_controls/select.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js index 8c39e4e97e1..b8b7f96183d 100644 --- a/src-docs/src/views/form_controls/select.js +++ b/src-docs/src/views/form_controls/select.js @@ -10,7 +10,7 @@ export default () => { { value: 'option_three', text: 'Option three' }, ]; - const [value, setValue] = useState(undefined); + const [value, setValue] = useState(options[1].value); const onChange = (e) => { setValue(e.target.value); @@ -20,7 +20,6 @@ export default () => { /* DisplayToggles wrapper for Docs only */