From 7c11113ac0c955a9ed0e6645ee29ccbe4d00f048 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 28 Feb 2020 13:27:26 -0700
Subject: [PATCH] Better guarantee that a popover position can be found (#2948)

* Better guarantee that a popover position can be found

* changelog
---
 CHANGELOG.md                                  |  1 +
 .../flyout/__snapshots__/flyout.test.tsx.snap | 43 +++++++++++++++++++
 src/services/popover/popover_positioning.ts   |  4 +-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3319cfae43..e70017473dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 - Fixed `EuiTitle` not rendering child classes ([#2925](https://github.com/elastic/eui/pull/2925))
 - Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
+- Fixed popover positioning service to be more lenient when positioning 0-width or 0-height content ([#2948](https://github.com/elastic/eui/pull/2948))
 
 **Theme: Amsterdam**
 
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 769a9174016..047a7510a83 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -172,6 +172,49 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
 </div>
 `;
 
+exports[`EuiFlyout props accepts div props 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="1"
+  />
+  <div
+    data-focus-lock-disabled="false"
+  >
+    <div
+      class="euiFlyout euiFlyout--medium"
+      id="imaflyout"
+      role="dialog"
+      tabindex="0"
+    >
+      <button
+        aria-label="Closes this dialog"
+        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
+        type="button"
+      >
+        <div
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          data-euiicon-type="cross"
+        />
+      </button>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`EuiFlyout props close button is not rendered 1`] = `
 <div>
   <div
diff --git a/src/services/popover/popover_positioning.ts b/src/services/popover/popover_positioning.ts
index 9e57d64438e..56b8a3c68ff 100644
--- a/src/services/popover/popover_positioning.ts
+++ b/src/services/popover/popover_positioning.ts
@@ -182,7 +182,7 @@ export function findPopoverPosition({
     }
   }
 
-  let bestFit = -Infinity;
+  let bestFit: number | undefined = undefined;
   let bestPosition: FindPopoverPositionResult | null = null;
 
   for (let idx = 0; idx < iterationPositions.length; idx++) {
@@ -201,7 +201,7 @@ export function findPopoverPosition({
       arrowConfig,
     });
 
-    if (screenCoordinates.fit > bestFit) {
+    if (bestFit === undefined || screenCoordinates.fit > bestFit) {
       bestFit = screenCoordinates.fit;
       bestPosition = {
         fit: screenCoordinates.fit,