diff --git a/CHANGELOG.md b/CHANGELOG.md index 5594bd7f00a..937d6dd5613 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ - Added support for `ghost` and `text` `EuiIcon` colors on Elastic logos ([#5245](https://github.com/elastic/eui/pull/5245)) - Added a default `data-test-subj` to `EuiErrorBoundary` ([#5232](https://github.com/elastic/eui/pull/5232)) +**Bug fixes** + +- Fixed content in `EuiPopover` from being inaccessable during the opening animation ([#5249](https://github.com/elastic/eui/pull/5249)) + ## [`39.0.0`](https://github.com/elastic/eui/tree/v39.0.0) - Added `maxWidth` prop to `EuiTour`, made `subtitle` optional, and fixed heading levels and footer background ([#5225](https://github.com/elastic/eui/pull/5225)) diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 188bccdab17..66cc75f1ab2 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -38,23 +38,18 @@ backface-visibility: hidden; pointer-events: none; opacity: 0; /* 2 */ - visibility: hidden; /* 2 */ - transition: /* 2 */ - opacity $euiAnimSlightBounce $euiAnimSpeedSlow, - visibility $euiAnimSlightBounce $euiAnimSpeedSlow; + transition: opacity $euiAnimSlightBounce $euiAnimSpeedSlow; /* 2 */ // Don't animate when using the attached mode like for inputs &:not(.euiPopover__panel-isAttached) { transform: translateY(0) translateX(0) translateZ(0); /* 2 */ transition: /* 2 */ opacity $euiAnimSlightBounce $euiAnimSpeedSlow, - visibility $euiAnimSlightBounce $euiAnimSpeedSlow, transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms); } &.euiPopover__panel-isOpen { opacity: 1; - visibility: visible; pointer-events: auto; } diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index c45771dfeae..7bf8200d478 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -435,8 +435,8 @@ export class EuiPopover extends Component { // there isn't a focus target, one of two reasons: // #1 is the whole panel hidden? If so, schedule another check // #2 panel is visible but no tabbables exist, move focus to the panel - const panelVisibility = window.getComputedStyle(this.panel).visibility; - if (panelVisibility === 'hidden') { + const panelVisibility = window.getComputedStyle(this.panel).opacity; + if (panelVisibility === '0') { // #1 this.updateFocus(); } else {