[EuiPopover] Allow content to be accessible during opening animation

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))

src-docs/src/views/progress/progress_chart.js

@@ -1,6 +1,12 @@
 import React, { Fragment } from 'react';
 
-import { EuiProgress, EuiSpacer } from '../../../../src/components';
+import {
+  EuiBadge,
+  EuiPopover,
+  EuiButton,
+  EuiProgress,
+  EuiSpacer,
+} from '../../../../src/components';
 
 const data = [
   { label: 'Basic percentage', value: '80' },
@@ -13,36 +19,57 @@ const data = [
   { label: "Women's Accessories", value: '24.0256' },
 ];
 
-export default () => (
-  <Fragment>
-    <div style={{ maxWidth: 160 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="success"
-            size="s"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-    <EuiSpacer size="m" />
-    <div style={{ maxWidth: 200 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="primary"
-            size="m"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-  </Fragment>
-);
+export default () => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Show popover
+    </EuiButton>
+  );
+
+  return (
+    <Fragment>
+      <EuiPopover
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+      >
+        <EuiBadge>Text</EuiBadge>
+        <div style={{ maxWidth: 160 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="success"
+                size="s"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+        <EuiSpacer size="m" />
+        <div style={{ maxWidth: 200 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="primary"
+                size="m"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+      </EuiPopover>
+    </Fragment>
+  );
+};

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;
   }
 

src/components/popover/popover.tsx

@@ -435,8 +435,8 @@ export class EuiPopover extends Component<Props, State> {
         // 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 {