From 4f1fdfcb0a86e063624b36266f255f3823f469fa Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 18 Oct 2022 16:34:30 -0400 Subject: [PATCH 1/4] Resolved a bug inside of EuiSelectable that prevented the options list from reappearing when the search bar was alter or emptied via an external function. Added a new test case to catch this instance --- src/components/selectable/selectable.spec.tsx | 14 +++++++++++ src/components/selectable/selectable.tsx | 24 +++++++++---------- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/selectable/selectable.spec.tsx b/src/components/selectable/selectable.spec.tsx index 1560402c9b4..e5e03141851 100644 --- a/src/components/selectable/selectable.spec.tsx +++ b/src/components/selectable/selectable.spec.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +/// /// import React, { useState } from 'react'; @@ -196,6 +197,19 @@ describe('EuiSelectable', () => { }); }); + it('restores the options list when the search bar is cleared', () => { + cy.realMount(); + cy.get('input') + .type('tester123') + .then(() => { + expect(cy.get('p')).to.exist; + }); + + cy.get('input').clear(); + + expect(cy.get('li[role=option]')).to.exist; + }); + it('has no accessibility errors', () => { const onChange = cy.stub(); cy.realMount(); diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx index a2e226f48e5..b3ac542fb10 100644 --- a/src/components/selectable/selectable.tsx +++ b/src/components/selectable/selectable.tsx @@ -240,28 +240,28 @@ export class EuiSelectable extends Component< const { options, isPreFiltered, searchProps } = nextProps; const { activeOptionIndex, searchValue } = prevState; - const matchingOptions = getMatchingOptions( - options, - searchValue, - isPreFiltered - ); - const stateUpdate: Partial> = { - visibleOptions: matchingOptions, + searchValue, activeOptionIndex, }; + if (searchProps?.value != null && searchProps.value !== searchValue) { + stateUpdate.searchValue = searchProps.value; + } + + stateUpdate.visibleOptions = getMatchingOptions( + options, + stateUpdate.searchValue ?? '', + isPreFiltered + ); + if ( activeOptionIndex != null && - activeOptionIndex >= matchingOptions.length + activeOptionIndex >= stateUpdate.visibleOptions.length ) { stateUpdate.activeOptionIndex = -1; } - if (searchProps?.value != null && searchProps.value !== searchValue) { - stateUpdate.searchValue = searchProps.value; - } - return stateUpdate; } From 148e5a3f774d0557438ecf9bcbae1158ed1d9f36 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 18 Oct 2022 16:54:10 -0400 Subject: [PATCH 2/4] Changelog --- upcoming_changelogs/6317.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6317.md diff --git a/upcoming_changelogs/6317.md b/upcoming_changelogs/6317.md new file mode 100644 index 00000000000..fc37688c3f3 --- /dev/null +++ b/upcoming_changelogs/6317.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiSelectable` to ensure the options list is displayed when the search bar is cleared using a function \ No newline at end of file From 4c9983edf03ffc15f5bfad4340e9e53a0ae3f41d Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 2 Nov 2022 12:54:53 -0400 Subject: [PATCH 3/4] Created Jest test case to validate fix for EuiSelectable issue that caused search results not to appear when the search bar value is controlled by searchProps.value. Removed Cypress test in lieu of a more accurate Jest test. --- src/components/selectable/selectable.spec.tsx | 13 ------- src/components/selectable/selectable.test.tsx | 35 +++++++++++++++++++ 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/components/selectable/selectable.spec.tsx b/src/components/selectable/selectable.spec.tsx index e5e03141851..34b875c13fe 100644 --- a/src/components/selectable/selectable.spec.tsx +++ b/src/components/selectable/selectable.spec.tsx @@ -197,19 +197,6 @@ describe('EuiSelectable', () => { }); }); - it('restores the options list when the search bar is cleared', () => { - cy.realMount(); - cy.get('input') - .type('tester123') - .then(() => { - expect(cy.get('p')).to.exist; - }); - - cy.get('input').clear(); - - expect(cy.get('li[role=option]')).to.exist; - }); - it('has no accessibility errors', () => { const onChange = cy.stub(); cy.realMount(); diff --git a/src/components/selectable/selectable.test.tsx b/src/components/selectable/selectable.test.tsx index f675445b89e..57af21b7847 100644 --- a/src/components/selectable/selectable.test.tsx +++ b/src/components/selectable/selectable.test.tsx @@ -204,6 +204,41 @@ describe('EuiSelectable', () => { ).toEqual('second value'); }); + it('updates options list when searchValue state is controlled by searchProps.value', () => { + const searchProps = { + value: 'Enceladus', + 'data-test-subj': 'searchInput', + }; + const component = mount( + + {(list, search) => ( + <> + {list} + {search} + + )} + + ); + + expect( + (component.find('EuiSelectableList').props() as any).visibleOptions + ).toHaveLength(1); + + component.setProps({ + searchProps: { ...searchProps, value: 'value not in list' }, + }); + + expect(component.find('EuiSelectableList').exists()).toBeFalsy(); + + component.setProps({ + searchProps: { ...searchProps, value: '' }, + }); + + expect( + (component.find('EuiSelectableList').props() as any).visibleOptions + ).toEqual(options); + }); + it('calls the searchProps.onChange callback on mount', () => { const onChange = jest.fn(); mount( From e7044eaf68bf17e33a1d80e7eafccd59598f668f Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Wed, 2 Nov 2022 12:55:47 -0400 Subject: [PATCH 4/4] Update upcoming_changelogs/6317.md Co-authored-by: Constance --- upcoming_changelogs/6317.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upcoming_changelogs/6317.md b/upcoming_changelogs/6317.md index fc37688c3f3..081f4044714 100644 --- a/upcoming_changelogs/6317.md +++ b/upcoming_changelogs/6317.md @@ -1,3 +1,3 @@ **Bug fixes** -- Fixed `EuiSelectable` to ensure the options list is displayed when the search bar is cleared using a function \ No newline at end of file +- Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` \ No newline at end of file