Merge pull request #279 from josemarluedke/bug/fix-popover-click-outs…

…ide-on-trigger fix: popover clicking outside closes and reopens on trigger
josemarluedke · Mar 17, 2024 · 594dc40 · 594dc40
2 parents 4207ab2 + 9404298
commit 594dc40
Showing 1 changed file with 33 additions and 2 deletions.
diff --git a/packages/overlays/src/components/popover.gts b/packages/overlays/src/components/popover.gts
@@ -65,7 +65,13 @@ interface PopoverSignature {
         }>;
         Content: WithBoundArgs<
           typeof Content,
-          'loop' | 'isOpen' | 'id' | 'toggle' | 'blockScroll' | 'backdrop'
+          | 'loop'
+          | 'isOpen'
+          | 'id'
+          | 'toggle'
+          | 'internalDidClose'
+          | 'blockScroll'
+          | 'backdrop'
         >;
       }
     ];
@@ -76,6 +82,7 @@ class Popover extends Component<PopoverSignature> {
   triggerEl?: HTMLElement;
   menuId = guidFor(this);
   @tracked _isOpen = false;
+  @tracked isClosing = false;
 
   get isOpen(): boolean {
     if (
@@ -97,6 +104,9 @@ class Popover extends Component<PopoverSignature> {
   };
 
   open = () => {
+    if (this.isClosing) {
+      return;
+    }
     if (typeof this.args.onOpenChange === 'function') {
       this.args.onOpenChange(true);
     } else {
@@ -105,6 +115,7 @@ class Popover extends Component<PopoverSignature> {
   };
 
   close = () => {
+    this.isClosing = true;
     if (typeof this.args.onOpenChange === 'function') {
       this.args.onOpenChange(false);
     } else {
@@ -147,6 +158,10 @@ class Popover extends Component<PopoverSignature> {
     }
   });
 
+  didClose = () => {
+    this.isClosing = false;
+  };
+
   <template>
     <Velcro
       @placement={{if @placement @placement "bottom-start"}}
@@ -171,6 +186,7 @@ class Popover extends Component<PopoverSignature> {
             loop=velcro.loop
             isOpen=this.isOpen
             toggle=this.toggle
+            internalDidClose=this.didClose
           )
         )
       }}
@@ -208,6 +224,11 @@ interface ContentArgs
    */
   toggle: () => void;
 
+  /**
+   * @ignore
+   */
+  internalDidClose: () => void;
+
   /**
    * @internal
    */
@@ -288,6 +309,16 @@ class Content extends Component<ContentSignature> {
     return true;
   }
 
+  didClose = () => {
+    if (typeof this.args.internalDidClose === 'function') {
+      this.args.internalDidClose();
+    }
+
+    if (typeof this.args.didClose === 'function') {
+      this.args.didClose();
+    }
+  };
+
   <template>
     <Overlay
       @blockScroll={{this.blockScroll}}
@@ -298,7 +329,7 @@ class Content extends Component<ContentSignature> {
       @isOpen={{@isOpen}}
       @onClose={{@toggle}}
       @onOpen={{@onOpen}}
-      @didClose={{@didClose}}
+      @didClose={{this.didClose}}
       @renderInPlace={{@renderInPlace}}
       @destinationElementId={{@destinationElementId}}
       @transitionDuration={{@transitionDuration}}