fix: issue with popover closing when clicked

Author: jelveh

src/gui/src/IPC.js

@@ -231,7 +231,7 @@ const ipc_listener = async (event, handled) => {
         // create html
         h += `<div style="padding: 10px 10px 2px;">`;
             h += `<div style="display:flex;">`;
-                h += `<input type="text" style="margin-bottom:10px;" class="social-url" readonly value="${html_encode(event.data.url)}"/>`;
+                h += `<input type="text" style="margin-bottom:10px; font-size: 13px;" class="social-url" readonly value="${html_encode(event.data.url)}"/>`;
                 h += `<button class="button copy-link" style="white-space:nowrap; text-align:center; white-space: nowrap; text-align: center; padding-left: 10px; padding-right: 10px; height: 33px; box-shadow: none; margin-left: 4px;">${(copy_icon)}</button>`;
             h += `</div>`;
 
@@ -247,7 +247,8 @@ const ipc_listener = async (event, handled) => {
         let po = await UIPopover({
             content: h,
             // snapToElement: this,
-            // parent_element: this,
+            parent_element: $el_parent_window,
+            parent_id: parent_window_id,
             // width: 300,
             height: 100,
             left: event.data.options.left,
@@ -256,6 +257,8 @@ const ipc_listener = async (event, handled) => {
         });
 
         $(po).find('.copy-link').on('click', function(e){
+            e.preventDefault();
+            e.stopPropagation();
             const url = $(po).find('.social-url').val();
             navigator.clipboard.writeText(url);
             // set checkmark
@@ -264,6 +267,8 @@ const ipc_listener = async (event, handled) => {
             setTimeout(function(){
                 $(po).find('.copy-link').html(copy_icon)
             }, 1000);
+
+            return false;
         })
     }
 
@@ -393,6 +398,13 @@ const ipc_listener = async (event, handled) => {
         });
     }
     //--------------------------------------------------------
+    // mouseClicked
+    //--------------------------------------------------------
+    else if(event.data.msg === 'mouseClicked'){
+        // close all popovers whose parent_id is parent_window_id
+        $('.popover[data-parent_id="'+parent_window_id+'"]').remove();
+    }
+    //--------------------------------------------------------
     // showDirectoryPicker
     //--------------------------------------------------------
     else if(event.data.msg === 'showDirectoryPicker'){
@@ -488,7 +500,6 @@ const ipc_listener = async (event, handled) => {
         // update mouse position
         update_mouse_position(x + window_position.left, y + window_position.top);
     }
-
     //--------------------------------------------------------
     // contextMenu
     //--------------------------------------------------------

src/gui/src/UI/UIPopover.js

@@ -30,7 +30,7 @@ function UIPopover(options){
     options.content = options.content ?? '';
 
     let h = '';
-    h += `<div id="popover-${window.global_element_id}" class="popover">`;
+    h += `<div id="popover-${window.global_element_id}" class="popover" ${options.parent_id && 'data-parent_id="'+html_encode(options.parent_id)+'"'}>`;
         h += options.content;
     h += `</div>`;
 

src/gui/src/initgui.js

@@ -1225,6 +1225,10 @@ window.initgui = async function(options){
 
         // if mouse is clicked on a window, activate it
         if(window.mouseover_window !== undefined){
+            // if popover clicked on, don't activate window. This is because if an app 
+            // is using the popover API to show a popover, the popover will be closed if the window is activated
+            if($(e.target).hasClass('popover') || $(e.target).parents('.popover').length > 0)
+                return;
             $(window.mouseover_window).focusWindow(e);
         }
     })

src/puter-js/src/modules/UI.js

@@ -530,6 +530,21 @@ class UI extends EventListener {
                 y: this.mouseY,
             }, '*');
         });
+
+        // click
+        document.addEventListener('click', async (event)=>{
+            // Get the mouse position from the event object
+            this.mouseX = event.clientX;
+            this.mouseY = event.clientY;
+
+            // send the mouse position to the host environment
+            this.messageTarget?.postMessage({
+                msg: "mouseClicked",
+                appInstanceID: this.appInstanceID,
+                x: this.mouseX,
+                y: this.mouseY,
+            }, '*');
+        })
     }
 
     onWindowClose = function(callback) {