Merge pull request #122 from manics/clipboard-close

Close clipboard if clicked outside

Author: yuvipanda

js/clipboard.js

@@ -10,8 +10,9 @@ import "./clipboard.css";
  * Setup trigger element to toggle showing / hiding clipboard element
  * @param {Element} trigger
  * @param {Element} clipboard
+ * @param {Array[Element]} closers array of elements that should close the clipboard if clicked
  */
-export function setupClipboard(trigger, clipboard) {
+export function setupClipboard(trigger, clipboard, closers) {
   const arrowElement = clipboard.querySelector(".arrow");
   function updatePosition() {
     computePosition(trigger, clipboard, {
@@ -53,5 +54,20 @@ 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
+  closers.forEach((el) => {
+    el.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.body, 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"]: