From a2eb1d5d1bcabebbdf2c24039e3bfe8c70837757 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Thu, 28 Aug 2025 20:12:31 +1000
Subject: [PATCH] search bar focus and select fix

---
 resources/views/components/navbar.blade.php | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index ee93c54..ce939ce 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -109,7 +109,20 @@
         </div>
     </div>
 
-    <div class="fixed inset-0 z-50 flex items-center justify-center" x-cloak x-show="showSearch" x-on:click="showSearch=false" x-on:keydown.escape.window="showSearch=false" x-init="$watch('showSearch', value => { if(value) { $nextTick(() => document.getElementsByName('q')[0].focus()) } })">
+    <div class="fixed inset-0 z-50 flex items-center justify-center" x-cloak x-show="showSearch" x-on:click="showSearch=false" x-on:keydown.escape.window="showSearch=false" x-init="$watch('showSearch', value => {
+        if(value) {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    const el = document.getElementsByName('q')[0];
+                    if (!el) return;
+                    el.focus({ preventScroll: true });
+                    if (typeof el.select === 'function') el.select();
+                    // iOS fallback:
+                    if (el.setSelectionRange) el.setSelectionRange(0, el.value.length);
+                })
+            })
+        }
+        })">
         <div class="absolute inset-0 backdrop-blur-sm bg-opacity-40 bg-black"></div>
         <div class="relative w-full mx-8 max-w-2xl bg-gray-50 p-2 rounded-lg shadow-lg" x-on:click.stop>
             <form action="{{ route('search.index') }}" method="GET">