Merge branch 'main' into mobile-columns-pt-iii

app/javascript/controllers/bar_controller.js

@@ -34,6 +34,7 @@ export default class extends Controller {
   showModalAndSubmit(event) {
     this.showModal()
     this.formTarget.requestSubmit()
+    this.#restoreFocusAfterTurboFrameLoads()
   }
 
   showModal() {
@@ -51,6 +52,12 @@ export default class extends Controller {
     }
   }
 
+  #restoreFocusAfterTurboFrameLoads() {
+    this.turboFrameTarget.addEventListener("turbo:frame-load", () => {
+      this.searchInputTarget.focus()
+    }, { once: true })
+  }
+
   #loadTurboFrame() {
     this.turboFrameTarget.src = this.searchUrlValue
   }

app/javascript/controllers/navigable_list_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { nextFrame } from "helpers/timing_helpers"
+import { isMobile } from "helpers/platform_helpers"
 
 export default class extends Controller {
   static targets = [ "item", "input" ]
@@ -18,6 +19,11 @@ export default class extends Controller {
     onlyActOnFocusedItems: { type: Boolean, default: false }
   }
 
+  // Don't load for mobile devices
+  static get shouldLoad() {
+    return !isMobile()
+  }
+
   connect() {
     if (this.autoSelectValue) {
       this.reset()

app/javascript/controllers/scroll_to_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "target" ]
+
+  connect() {
+    this.#scrollTargetIntoView()
+  }
+
+  #scrollTargetIntoView() {
+    if(this.hasTargetTarget) {
+      this.element.scrollTo({
+        top: this.targetTarget.offsetTop - this.element.offsetHeight / 2 + this.targetTarget.offsetHeight / 2,
+        left: this.targetTarget.offsetLeft - this.element.offsetWidth / 2 + this.targetTarget.offsetWidth / 2,
+        behavior: "instant"
+      })
+    }
+  }
+}

app/javascript/controllers/soft_keyboard_controller.js

@@ -1,10 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 import { nextEventNamed } from "helpers/timing_helpers"
+import { isTouchDevice } from "helpers/platform_helpers"
 
 export default class extends Controller {
   // Only load for touch devices
   static get shouldLoad() {
-    return "ontouchstart" in window && navigator.maxTouchPoints > 0
+    return isTouchDevice()
   }
 
   // Use a fake input to trigger the soft keyboard on actions that load async content

app/javascript/helpers/platform_helpers.js

@@ -0,0 +1,15 @@
+export function isTouchDevice() {
+  return "ontouchstart" in window && navigator.maxTouchPoints > 0
+}
+
+export function isIos() {
+  return /iPhone|iPad/.test(navigator.userAgent)
+}
+
+export function isAndroid() {
+  return /Android/.test(navigator.userAgent)
+}
+
+export function isMobile() {
+  return isIos() || isAndroid()
+}