Close bookmark details with escape (#702)

bookmarks/frontend/behaviors/modal.js

@@ -4,13 +4,41 @@ class ModalBehavior extends Behavior {
   constructor(element) {
     super(element);
 
+    this.onClose = this.onClose.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+
     const modalOverlay = element.querySelector(".modal-overlay");
     const closeButton = element.querySelector("button.close");
-    modalOverlay.addEventListener("click", this.onClose.bind(this));
-    closeButton.addEventListener("click", this.onClose.bind(this));
+    modalOverlay.addEventListener("click", this.onClose);
+    closeButton.addEventListener("click", this.onClose);
+
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown(event) {
+    // Skip if event occurred within an input element
+    const targetNodeName = event.target.nodeName;
+    const isInputTarget =
+      targetNodeName === "INPUT" ||
+      targetNodeName === "SELECT" ||
+      targetNodeName === "TEXTAREA";
+
+    if (isInputTarget) {
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.onClose();
+    }
   }
 
   onClose() {
+    document.removeEventListener("keydown", this.onKeyDown);
     this.element.classList.add("closing");
     this.element.addEventListener("animationend", (event) => {
       if (event.animationName === "fade-out") {