Skip to content

EuiFormRow with nested EuiPopovers using ownFocus #2110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thompsongl merged 6 commits into from
Jul 15, 2019
Merged

EuiFormRow with nested EuiPopovers using ownFocus #2110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
60522a6
minimize focus updates to open events
thompsongl Jul 11, 2019
6a1ec36
update color picker example to be the problem case
thompsongl Jul 11, 2019
6cc9432
Merge branch 'master' into formrow-popover
thompsongl Jul 15, 2019
8199159
move updatefocus to setstate callback
thompsongl Jul 15, 2019
bee79d6
Merge branch 'master' into formrow-popover
thompsongl Jul 15, 2019
7f3669e
CL
thompsongl Jul 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

- Fixed `EuiComboBox`'s options list from staying open when scrolled in a container by auto-closing the list on scroll ([#2106](https://github.com/elastic/eui/pull/2106))
- Fixed content provided to `EuiListGroupItem` and `EuiFilterButton` `title` attribute to prevent unreadable popover ([#2100](https://github.com/elastic/eui/pull/2100))
- Fixed a nearly infinite `requestAnimationFrame` loop caused by `focus` state changes in nested `EuiPopover` components ([#2110](https://github.com/elastic/eui/pull/2110))

## [`12.3.1`](https://github.com/elastic/eui/tree/v12.3.1)

Expand Down
22 changes: 12 additions & 10 deletions src-docs/src/views/color_picker/containers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,18 @@ export default class extends Component {
{colorPicker}
</EuiFormRow>

<EuiPopover
id="popover"
ownFocus
button={button}
isOpen={isPopoverOpen}
closePopover={this.closePopover}>
<div style={{ width: '300px' }}>
<EuiFormRow label="Color picker">{colorPicker}</EuiFormRow>
</div>
</EuiPopover>
<EuiFormRow label="Unruly focus management">
<EuiPopover
id="popover"
ownFocus={true}
button={button}
isOpen={isPopoverOpen}
closePopover={this.closePopover}>
<div style={{ width: '300px' }}>
<EuiFormRow label="Color picker">{colorPicker}</EuiFormRow>
</div>
</EuiPopover>
</EuiFormRow>

<EuiSpacer size="m" />

Expand Down
8 changes: 5 additions & 3 deletions src/components/popover/popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,10 @@ export class EuiPopover extends Component {
);

setTimeout(() => {
this.setState({ isOpenStable: true }, this.positionPopoverFixed);
this.setState({ isOpenStable: true }, () => {
this.positionPopoverFixed();
this.updateFocus();
});
}, durationMatch + delayMatch);
}

Expand All @@ -267,8 +270,6 @@ export class EuiPopover extends Component {
});
}, 250);
}

this.updateFocus();
}

componentWillUnmount() {
Expand Down Expand Up @@ -484,6 +485,7 @@ export class EuiPopover extends Component {
panel = (
<EuiPortal insert={insert}>
<EuiFocusTrap
returnFocus={!this.state.isOpening} // Ignore temporary state of indecisive focus
clickOutsideDisables={true}
initialFocus={initialFocus}
disabled={!ownFocus}>
Expand Down