Better guarantee that a popover position can be found (#2948)

* Better guarantee that a popover position can be found * changelog
elastic · Feb 28, 2020 · 7c11113 · 7c11113
1 parent f5db1d4
commit 7c11113
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,