From 36251ab35ce11c9e80f8e32861e98b87b3d5f3d0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompsongl@users.noreply.github.com>
Date: Mon, 15 Jul 2019 15:06:20 -0500
Subject: [PATCH] `EuiFormRow` with nested `EuiPopover`s using `ownFocus`
 (#2110)

* minimize focus updates to open events

* update color picker example to be the problem case

* move updatefocus to setstate callback

* CL
---
 CHANGELOG.md                                  |  1 +
 src-docs/src/views/color_picker/containers.js | 22 ++++++++++---------
 src/components/popover/popover.js             |  8 ++++---
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3d9416368f..ea77667d44f 100644
--- 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
index de6f7517b92..ad38d3c1e01 100644
--- 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
index 7d677d3e3e9..01d39744cc5 100644
--- 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}>