Focus selector's search input

This commit is contained in:
Abdo 2025-08-28 03:32:03 +03:00
parent a3bf145007
commit 3eb99c8a3e

View file

@ -33,6 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}: Props = $props(); }: Props = $props();
let modal: Modal | null = $state(null); let modal: Modal | null = $state(null);
let searchQuery = $state(""); let searchQuery = $state("");
let searchInput: HTMLInputElement | null = $state(null);
const filteredItems = $derived( const filteredItems = $derived(
searchQuery.trim() === "" searchQuery.trim() === ""
@ -70,7 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</LabelButton> </LabelButton>
<Shortcut {keyCombination} on:action={() => modal?.toggle()} /> <Shortcut {keyCombination} on:action={() => modal?.toggle()} />
<Modal bind:this={modal} dialogClass="modal-lg"> <Modal bind:this={modal} onShown={() => searchInput?.focus()} dialogClass="modal-lg">
<div slot="header" class="modal-header"> <div slot="header" class="modal-header">
<IconConstrain iconSize={90}> <IconConstrain iconSize={90}>
<Icon {icon} /> <Icon {icon} />
@ -97,6 +98,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="search-input" class="search-input"
placeholder={tr.actionsSearch()} placeholder={tr.actionsSearch()}
bind:value={searchQuery} bind:value={searchQuery}
bind:this={searchInput}
/> />
{#if searchQuery} {#if searchQuery}
<button <button