From 1fb9e7d09deb8d96aa0d10555a81fc4f1a5b5571 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Fri, 16 Oct 2020 16:10:24 -0400 Subject: [PATCH 1/4] fix focus bug in Selectable --- CHANGELOG.md | 2 ++ src/components/selectable/selectable.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de2eb5ed089..06484aa5e3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Fix focus management bug in Selectable ([]()) + **Theme: Amsterdam** - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133)) diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx index 90f95ebb897..473f2c5f936 100644 --- a/src/components/selectable/selectable.tsx +++ b/src/components/selectable/selectable.tsx @@ -154,7 +154,7 @@ export class EuiSelectable extends Component< singleSelection: false, searchable: false, }; - + private containerRef = createRef(); private optionsListRef = createRef>(); rootId = htmlIdGenerator(); constructor(props: EuiSelectableProps) { @@ -335,7 +335,9 @@ export class EuiSelectable extends Component< ); }; - onContainerBlur = () => { + onContainerBlur = (e: React.FocusEvent) => { + if (this.containerRef.current!.contains(e.relatedTarget as Node)) return; + this.setState({ activeOptionIndex: undefined, isFocused: false, @@ -592,6 +594,7 @@ export class EuiSelectable extends Component< return (
Date: Mon, 19 Oct 2020 12:02:13 -0500 Subject: [PATCH 2/4] Add explanatory comment --- src/components/selectable/selectable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx index 473f2c5f936..be5b7b6a999 100644 --- a/src/components/selectable/selectable.tsx +++ b/src/components/selectable/selectable.tsx @@ -336,6 +336,7 @@ 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; this.setState({ From 9d56fd239a900d29c2030166e5fee4436317c471 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 19 Oct 2020 14:12:59 -0400 Subject: [PATCH 3/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 49500b14ae9..fc556a317d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Fix focus management bug in Selectable ([4152](https://github.com/elastic/eui/pull/4152)) +- Fixed focus management bug in `EuiSelectable` ([4152](https://github.com/elastic/eui/pull/4152)) - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056)) - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056)) - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056)) From db118c49f9de762263a1048ead84ab03264c7692 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 19 Oct 2020 13:16:52 -0500 Subject: [PATCH 4/4] Move bug fix CL entry to bug fix section --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fc556a317d7..d79450409a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Fixed focus management bug in `EuiSelectable` ([4152](https://github.com/elastic/eui/pull/4152)) - Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056)) - Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056)) - Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056)) +**Bug fixes** +- Fixed focus management bug in `EuiSelectable` ([4152](https://github.com/elastic/eui/pull/4152)) + **Breaking changes** - Removed `EuiToggle` and `EuiButtonToggle` in favor of `aria-pressed` ([4056](https://github.com/elastic/eui/pull/4056))