EuiFormRow with nested EuiPopovers using ownFocus (#2110)

* minimize focus updates to open events * update color picker example to be the problem case * move updatefocus to setstate callback * CL
elastic · Jul 15, 2019 · 36251ab · 36251ab
1 parent d4fc5a2
commit 36251ab
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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)
 

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
@@ -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" />
 

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
@@ -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);
     }
 
@@ -267,8 +270,6 @@ export class EuiPopover extends Component {
         });
       }, 250);
     }
-
-    this.updateFocus();
   }
 
   componentWillUnmount() {
@@ -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}>