feat(search): autofocus input on view load
This commit is contained in:
1 parent
1b9a8bd0af
commit
66110857a9
1 file changed
+7
-2
@@ -1,13 +1,17 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount, tick } from 'svelte';
|
||||||
import { invoke } from '@tauri-apps/api/core';
|
import { invoke } from '@tauri-apps/api/core';
|
||||||
import { Search, Disc3, Music, Mic2, User, X } from 'lucide-svelte';
|
import { Search, Disc3, Music, Mic2, User, X } from 'lucide-svelte';
|
||||||
import AlbumCard from '../AlbumCard.svelte';
|
import AlbumCard from '../AlbumCard.svelte';
|
||||||
import TrackMenu from '../TrackMenu.svelte';
|
import TrackMenu from '../TrackMenu.svelte';
|
||||||
import { getSearchState, setSearchState, type SearchResults, type SearchTab } from '$lib/stores/searchState';
|
import { getSearchState, setSearchState, type SearchResults, type SearchTab } from '$lib/stores/searchState';
|
||||||
|
|
||||||
onMount(() => {
|
let searchInput: HTMLInputElement | null = null;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
console.log('SearchView mounted!');
|
console.log('SearchView mounted!');
|
||||||
|
await tick();
|
||||||
|
searchInput?.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Track which images have failed to load
|
// Track which images have failed to load
|
||||||
@@ -271,6 +275,7 @@
|
|||||||
bind:value={query}
|
bind:value={query}
|
||||||
oninput={debounceSearch}
|
oninput={debounceSearch}
|
||||||
class="search-input"
|
class="search-input"
|
||||||
|
bind:this={searchInput}
|
||||||
/>
|
/>
|
||||||
{#if query.trim()}
|
{#if query.trim()}
|
||||||
<button class="search-clear" onclick={clearSearch} aria-label="Clear search">
|
<button class="search-clear" onclick={clearSearch} aria-label="Clear search">
|
||||||
|
|||||||
Reference in new issue
Block a user