docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20920 from dvdksn/fix-search-bar-safari 

search: don't hide search drop-down on focus change
This commit is contained in:
David Karlsson 2024-09-17 15:53:19 +02:00 committed by GitHub
parent 2db16747db 87af4e586a
commit b89f318bf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/partials/search-bar.html
View File

@ -3,12 +3,11 @@
<span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span> <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
</a> </a>
<!-- search button --> <!-- search button -->
<div x-ref="searchBarRef" x-data="{ open: false, focus: false }" @focus="open = true;" @click.outside="open = false;" <div x-ref="searchBarRef" x-data="{ open: false }" @click.outside="open = false;"
@keyup.escape.window="open = false" id="search-bar" @keyup.escape.window="open = false" id="search-bar"
class="hidden sm:flex relative bg-white/10 rounded items-center p-2 sm:w-full xl:w-[400px]"> class="hidden sm:flex relative bg-white/10 rounded items-center p-2 sm:w-full xl:w-[400px]">
{{ (resources.Get "images/search-ai.svg").Content | safeHTML }} {{ (resources.Get "images/search-ai.svg").Content | safeHTML }}
<input x-ref="searchBarInput" type="search" id="search-bar-input" @click="open = true" @focus="open = true;" <input x-ref="searchBarInput" type="search" id="search-bar-input" @focus="open = true;"
@blur.window.capture="$refs.searchBarRef.contains($event.relatedTarget) || (open = false);"
@keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;" @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
@keyup.escape.prevent="open = false;" @keydown.window="(e) => { @keyup.escape.prevent="open = false;" @keydown.window="(e) => {
switch(e.key) { switch(e.key) {
@ -16,7 +15,6 @@
if (e.metaKey || e.ctrlKey) { if (e.metaKey || e.ctrlKey) {
e.preventDefault(); e.preventDefault();
$el.focus(); $el.focus();
open = true;
} }
break; break;
} }
@ -30,7 +28,7 @@
<span>K</span> <span>K</span>
</div> </div>
<div x-cloak :class="open || 'hidden'"> <div x-cloak :class="open || 'hidden'">
<button tabindex="-1" @click="$refs.searchBarInput.value = ''; open = false" class="text-white hover:text-white"> <button @click="$refs.searchBarInput.value = ''; open = false" class="text-white hover:text-white">
<span class="icon-svg">{{ partialCached "icon" "close" "close" }}</span> <span class="icon-svg">{{ partialCached "icon" "close" "close" }}</span>
</button> </button>
</div> </div>