Add a focus restore controller (#608)

app/javascript/stimulus/focus_restore_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.lastFocusedElement = null
+
+    document.addEventListener("focusin", this.boundHandleFocusIn)
+    document.addEventListener("focusout", this.boundHandleFocusOut)
+    document.addEventListener("visibilitychange", this.boundHandleVisibilityChange)
+    window.addEventListener("focus", this.boundHandleVisibilityChange)
+    window.addEventListener("blur", this.boundHandleVisibilityChange)
+  }
+
+  disconnect() {
+    document.removeEventListener("focusin", this.boundHandleFocusIn)
+    document.removeEventListener("focusout", this.boundHandleFocusOut)
+    document.removeEventListener("visibilitychange", this.boundHandleVisibilityChange)
+    window.removeEventListener("focus", this.boundHandleVisibilityChange)
+    window.removeEventListener("blur", this.boundHandleVisibilityChange)
+  }
+
+  boundHandleFocusIn = (event) => { this.handleFocusIn(event) }
+  handleFocusIn(event) {
+    if (event.target.matches("input, textarea, [contenteditable]")) {
+      this.lastFocusedElement = event.target
+    }
+  }
+
+  boundHandleFocusOut = (event) => { this.handleFocusOut(event) }
+  handleFocusOut(event) {
+    // Small delay to check if focus moved to another input or was truly lost
+    setTimeout(() => {
+      if (!document.activeElement.matches("input, textarea, [contenteditable]")) {
+        this.lastFocusedElement = null
+      }
+    }, 0)
+  }
+
+  boundHandleVisibilityChange = (event) => { this.handleVisibilityChange(event) }
+  handleVisibilityChange(event) {
+    if (!document.hidden && this.lastFocusedElement) {
+      this.lastFocusedElement.focus()
+      if ("selectionStart" in this.lastFocusedElement) {
+        this.lastFocusedElement.selectionStart = this.lastFocusedElement.selectionEnd = this.lastFocusedElement.value.length
+      }
+    }
+  }
+}

app/javascript/stimulus/image_upload_controller.js

@@ -4,6 +4,11 @@ export default class extends Controller {
   static targets = [ "file", "content", "preview" ]
 
   connect() {
+    if (!this.hasFileTarget || !this.hasContentTarget) {
+      console.log("image-upload controller is skipping initialization because a target is missing")
+      return
+    }
+
     this.dragCounter = 0
     this.fileTarget.addEventListener("change", this.boundPreviewUpdate)
     this.element.addEventListener("drop", this.boundDropped)
@@ -14,6 +19,8 @@ export default class extends Controller {
   }
 
   disconnect() {
+    if (!this.hasFileTarget || !this.hasContentTarget) return
+
     this.fileTarget.removeEventListener("change", this.boundPreviewUpdate)
     this.element.removeEventListener("drop", this.boundDropped)
     this.contentTarget.removeEventListener("paste", this.boundPasted)
@@ -24,6 +31,8 @@ export default class extends Controller {
 
   boundPreviewUpdate = () => { this.previewUpdate() }
   previewUpdate() {
+    if (!this.hasFileTarget || !this.hasPreviewTarget) return
+
     const input = this.fileTarget
     if (input.files && input.files[0]) {
       const reader = new FileReader()
@@ -38,19 +47,23 @@ export default class extends Controller {
   }
 
   previewRemove() {
+    if (!this.hasPreviewTarget) return
+
     this.previewTarget.querySelector("img").src = ''
     this.element.classList.remove("show-previews")
-    this.contentTarget.focus()
+    if (this.hasContentTarget) this.contentTarget.focus()
     window.dispatchEvent(new CustomEvent('main-column-changed'))
   }
 
   boundDropped = (event) => { this.dropped(event) }
   dropped(event) {
+    if (!this.hasFileTarget) return
+
     event.preventDefault()
     this.dragCounter = 0
     const shade = this.element.querySelector("#drag-n-drop-shade")
     if (shade) shade.remove()
-  
+
     let files = event.dataTransfer.files
     this.fileTarget.files = files
     this.previewUpdate()
@@ -82,6 +95,8 @@ export default class extends Controller {
 
   boundPasted = async (event) => { this.pasted(event) }
   async pasted(event) {
+    if (!this.hasFileTarget) return
+
     const clipboardData =
       event.clipboardData || event.originalEvent.clipboardData
 
@@ -113,14 +128,16 @@ export default class extends Controller {
   displayDragnDropShade() {
     const existing = this.element.querySelector("#drag-n-drop-shade")
     if (existing) return
-    
+
     this.element.insertAdjacentHTML(
       'beforeend',
       '<div id="drag-n-drop-shade"></div>'
     );
   }
 
   addImageToFileInput(dataURL, fileType) {
+    if (!this.hasFileTarget) return
+
     const fileList = new DataTransfer()
     const blob = this.dataURLtoBlob(dataURL, fileType)
     fileList.items.add(
@@ -140,10 +157,12 @@ export default class extends Controller {
   }
 
   choose() {
+    if (!this.hasFileTarget) return
     this.fileTarget.click()
   }
 
   remove() {
+    if (!this.hasFileTarget) return
     this.fileTarget.value = ''
     this.previewRemove()
   }

app/views/layouts/application.html.erb

@@ -8,7 +8,7 @@
       <%= Current.user.preferences[:dark_mode] %>
       bg-white dark:bg-gray-800
     "
-    data-controller="transition"
+    data-controller="transition focus-restore"
     data-transition-toggle-class="nav-closed"
     data-transition-target="transitionable"
   >