popover fixes

app/assets/javascripts/polaris_view_components.js

@@ -2134,6 +2134,10 @@ class Popover extends Controller {
     if (this.cleanup) {
       this.cleanup();
     }
+    if (this.target && this.appendToBodyValue) {
+      this.target.remove();
+    }
+    this._target = null;
   }
   updatePosition() {
     if (this.cleanup) {
@@ -2142,7 +2146,10 @@ class Popover extends Controller {
     this.cleanup = autoUpdate(this.activator, this.target, (() => {
       computePosition(this.activator, this.target, {
         placement: this.placementValue,
-        middleware: [ offset(5), flip(), shift({
+        middleware: [ offset(5), flip({
+          fallbackPlacements: [ this.placementValue ],
+          fallbackStrategy: "bestFit"
+        }), shift({
           padding: 5
         }) ]
       }).then((({x: x, y: y}) => {

app/assets/javascripts/polaris_view_components/popover_controller.js

@@ -1,103 +1,118 @@
-import { Controller } from "@hotwired/stimulus"
-import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom"
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
-  static targets = ["activator", "popover", "template"]
-  static classes = ["open", "closed"]
+  static targets = ["activator", "popover", "template"];
+  static classes = ["open", "closed"];
   static values = {
     appendToBody: Boolean,
     placement: String,
     active: Boolean,
-    textFieldActivator: Boolean
-  }
+    textFieldActivator: Boolean,
+  };
 
   connect() {
     if (this.appendToBodyValue) {
-      const clonedTemplate = this.templateTarget.content.cloneNode(true)
-      this.target = clonedTemplate.firstElementChild
-      document.body.appendChild(clonedTemplate)
+      const clonedTemplate = this.templateTarget.content.cloneNode(true);
+      this.target = clonedTemplate.firstElementChild;
+      document.body.appendChild(clonedTemplate);
     }
 
-    this.target.style.display = 'none'
+    this.target.style.display = "none";
 
     if (this.activeValue) {
-      this.show()
+      this.show();
     }
   }
 
   disconnect() {
     if (this.cleanup) {
-      this.cleanup()
+      this.cleanup();
+    }
+    if (this.target && this.appendToBodyValue) {
+      this.target.remove();
     }
+    this._target = null;
   }
-
   updatePosition() {
     if (this.cleanup) {
-      this.cleanup()
+      this.cleanup();
     }
     this.cleanup = autoUpdate(this.activator, this.target, () => {
       computePosition(this.activator, this.target, {
         placement: this.placementValue,
         middleware: [
           offset(5),
-          flip(),
-          shift({ padding: 5 })
-        ]
-      }).then(({x, y}) => {
+          // Only flip to opposite side if there's not enough space
+          flip({
+            fallbackPlacements: [this.placementValue],
+            fallbackStrategy: "bestFit",
+          }),
+          shift({ padding: 5 }),
+        ],
+      }).then(({ x, y }) => {
         Object.assign(this.target.style, {
           left: `${x}px`,
           top: `${y}px`,
-        })
-      })
-    })
+        });
+      });
+    });
   }
 
   toggle() {
     if (this.target.classList.contains(this.openClass)) {
-      this.forceHide()
+      this.forceHide();
     } else {
-      this.show()
+      this.show();
     }
   }
 
   show() {
-    this.target.style.display = 'block'
-    this.target.classList.remove(this.closedClass)
-    this.target.classList.add(this.openClass)
-    this.updatePosition()
+    this.target.style.display = "block";
+    this.target.classList.remove(this.closedClass);
+    this.target.classList.add(this.openClass);
+    this.updatePosition();
   }
 
   hide(event) {
-    if (this.element.contains(event.target)) return
-    if (this.target.classList.contains(this.closedClass)) return
-    if (this.appendToBodyValue && this.target.contains(event.target)) return
+    if (this.element.contains(event.target)) return;
+    if (this.target.classList.contains(this.closedClass)) return;
+    if (this.appendToBodyValue && this.target.contains(event.target)) return;
 
-    this.forceHide()
+    this.forceHide();
   }
 
   forceHide() {
-    this.target.style.display = 'none'
-    this.target.classList.remove(this.openClass)
-    this.target.classList.add(this.closedClass)
+    this.target.style.display = "none";
+    this.target.classList.remove(this.openClass);
+    this.target.classList.add(this.closedClass);
   }
 
   get activator() {
     if (this.textFieldActivatorValue) {
-      return this.activatorTarget.querySelector('[data-controller="polaris-text-field"]')
+      return this.activatorTarget.querySelector(
+        '[data-controller="polaris-text-field"]'
+      );
     } else {
-      return this.activatorTarget
+      return this.activatorTarget;
     }
   }
 
   get target() {
     if (this.hasPopoverTarget) {
-      return this.popoverTarget
+      return this.popoverTarget;
     } else {
-      return this._target
+      return this._target;
     }
   }
 
   set target(value) {
-    this._target = value
+    this._target = value;
   }
 }