STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

search bar focus and select fix

Browse Source
This commit is contained in:
James Collins
2025-08-28 20:12:31 +10:00
parent be4fdb2f80
commit a2eb1d5d1b
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/views/components/navbar.blade.php
View File

@@ -109,7 +109,20 @@
</div> </div>
</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="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> <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"> <form action="{{ route('search.index') }}" method="GET">