From eaab94c40f9dd9866dfbd4c64e65784f353848b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Ferna=CC=81ndez=20Haro?= Date: Thu, 12 Aug 2021 15:36:17 +0200 Subject: [PATCH 1/4] [EuiSelectable] Fix logic to detect the blur event coming from child popover --- CHANGELOG.md | 1 + src/components/selectable/selectable.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d6970e29a4e..185b8acd32b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ **Bug fixes** - Fixed usage of `outsideClickCloses` prop of `EuiFlyout` ([#4986](https://github.com/elastic/eui/pull/4986)) +- [EuiSelectable] Fix logic to detect the blur event coming from child popover ([#5021](https://github.com/elastic/eui/pull/5021)) ## [`37.1.0`](https://github.com/elastic/eui/tree/v37.1.0) diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx index 409522a777d..d33c7e6698e 100644 --- a/src/components/selectable/selectable.tsx +++ b/src/components/selectable/selectable.tsx @@ -330,7 +330,12 @@ export class EuiSelectable extends Component< onContainerBlur = (e: React.FocusEvent) => { // Ignore blur events when moving from search to option to avoid activeOptionIndex conflicts - if (this.containerRef.current!.contains(e.relatedTarget as Node)) return; + if ( + ((e.relatedTarget as Node)?.firstChild as HTMLElement)?.id === + this.rootId('listbox') + ) { + return; + } this.setState({ activeOptionIndex: undefined, From 30337609994a3174524c80d5864d189501a9fe1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Ferna=CC=81ndez=20Haro?= Date: Thu, 12 Aug 2021 15:45:44 +0200 Subject: [PATCH 2/4] Better changelog message --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 185b8acd32b..82856e17f50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ **Bug fixes** - Fixed usage of `outsideClickCloses` prop of `EuiFlyout` ([#4986](https://github.com/elastic/eui/pull/4986)) -- [EuiSelectable] Fix logic to detect the blur event coming from child popover ([#5021](https://github.com/elastic/eui/pull/5021)) +- Fixed `EuiSelectable`'s logic to detect the blur event coming from child popover ([#5021](https://github.com/elastic/eui/pull/5021)) ## [`37.1.0`](https://github.com/elastic/eui/tree/v37.1.0) From db8eafd8bc4b98ba63e8206dc5ec5b3455fdaffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Ferna=CC=81ndez=20Haro?= Date: Thu, 12 Aug 2021 20:29:08 +0200 Subject: [PATCH 3/4] Add tests --- .../__snapshots__/selectable.test.tsx.snap | 40 +++++++++++++++++++ src/components/selectable/selectable.test.tsx | 25 ++++++++++++ 2 files changed, 65 insertions(+) diff --git a/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/src/components/selectable/__snapshots__/selectable.test.tsx.snap index 96a0b54fd75..35ce39017b3 100644 --- a/src/components/selectable/__snapshots__/selectable.test.tsx.snap +++ b/src/components/selectable/__snapshots__/selectable.test.tsx.snap @@ -54,3 +54,43 @@ exports[`EuiSelectable props singleSelection 1`] = ` class="euiSelectable" /> `; + +exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its popover 1`] = ` +Object { + "activeOptionIndex": 0, + "isFocused": true, + "searchValue": "", + "visibleOptions": Array [ + Object { + "data-test-subj": "titanOption", + "label": "Titan", + }, + Object { + "label": "Enceladus", + }, + Object { + "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + ], +} +`; + +exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its popover 2`] = ` +Object { + "activeOptionIndex": 0, + "isFocused": true, + "searchValue": "", + "visibleOptions": Array [ + Object { + "data-test-subj": "titanOption", + "label": "Titan", + }, + Object { + "label": "Enceladus", + }, + Object { + "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + ], +} +`; diff --git a/src/components/selectable/selectable.test.tsx b/src/components/selectable/selectable.test.tsx index ef63c131616..3eda2107cb6 100644 --- a/src/components/selectable/selectable.test.tsx +++ b/src/components/selectable/selectable.test.tsx @@ -36,6 +36,31 @@ describe('EuiSelectable', () => { expect(component).toMatchSnapshot(); }); + test('should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its popover', () => { + const component = mount( + + {(list, search) => ( + <> + {list} + {search} + + )} + + ); + + component.setState({ + activeOptionIndex: 0, + isFocused: true, + }); + expect(component.state()).toMatchSnapshot(); + + component.find('.euiSelectable').simulate('blur', { + relatedTarget: { firstChild: { id: 'generated-id_listbox' } }, + }); + component.update(); + expect(component.state()).toMatchSnapshot(); + }); + describe('props', () => { test('searchable', () => { const component = render(); From 56def1992c5741c1a9a005f80f95eb01f6d28d21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Thu, 12 Aug 2021 19:29:55 +0100 Subject: [PATCH 4/4] 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 587ba35188f..74b03adab5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ **Bug fixes** - Fixed content in `EuiFilterButton` when `numFilters` is not passed ([#5012](https://github.com/elastic/eui/pull/5012)) -- Fixed `EuiSelectable`'s logic to detect the blur event coming from child popover ([#5021](https://github.com/elastic/eui/pull/5021)) +- Fixed `EuiSelectable`'s double click bug ([#5021](https://github.com/elastic/eui/pull/5021)) ## [`37.2.0`](https://github.com/elastic/eui/tree/v37.2.0)