Close clipboard if clicked outside

Author: manics

js/clipboard.js

@@ -11,7 +11,7 @@ import "./clipboard.css";
  * @param {Element} trigger
  * @param {Element} clipboard
  */
-export function setupClipboard(trigger, clipboard) {
+export function setupClipboard(trigger, clipboard, canvas) {
   const arrowElement = clipboard.querySelector(".arrow");
   function updatePosition() {
     computePosition(trigger, clipboard, {
@@ -53,5 +53,18 @@ export function setupClipboard(trigger, clipboard) {
     trigger.classList.toggle("active");
     updatePosition();
     e.preventDefault();
+    e.stopPropagation();
+  });
+
+  // If the clipboard is clicked this should not be passed to the desktop
+  clipboard.addEventListener("click", (e) => {
+    e.stopPropagation();
+  });
+  // Close the popup if we click outside it
+  canvas.addEventListener("click", () => {
+    if (trigger.classList.contains("active")) {
+      clipboard.classList.toggle("hidden");
+      trigger.classList.toggle("active");
+    }
   });
 }

js/index.js

@@ -85,6 +85,7 @@ function connect() {
   setupClipboard(
     document.getElementById("clipboard-button"),
     document.getElementById("clipboard-container"),
+    document.getElementsByTagName("canvas")[0],
   );
 }
 

tests/test_browser.py

@@ -58,10 +58,12 @@ def test_desktop(browser):
     # Open clipboard, enter random text, close clipboard
     clipboard_text = str(uuid4())
     page1.get_by_role("link", name="Remote Clipboard").click()
-    page1.wait_for_selector("#clipboard-text")
+    expect(page1.locator("#clipboard-text")).to_be_visible()
     page1.locator("#clipboard-text").click()
     page1.locator("#clipboard-text").fill(clipboard_text)
-    page1.get_by_role("link", name="Remote Clipboard").click()
+    # Click outside clipboard, it should be closed
+    page1.locator("canvas").click(position={"x": 969, "y": 273})
+    expect(page1.locator("#clipboard-text")).not_to_be_visible()
 
     # Exec into container to check clipboard contents
     for engine in ["docker", "podman"]: