doman/fooder-app
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

autofocus issues

Browse source
This commit is contained in:
Piotr Domański 2026-04-02 12:04:51 +02:00
parent ade4ac821f
commit 028dbfb772
2 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/routes/(app)/diary/[date]/add-entry/+page.svelte
View file

@ -29,6 +29,16 @@
let scanLoading = $state(false); let scanLoading = $state(false);
let scanError = $state<string | null>(null); let scanError = $state<string | null>(null);
let searchInput = $state<HTMLInputElement | null>(null);
$effect(() => { if (searchInput) setTimeout(() => searchInput?.focus(), 50); });
let gramsInput = $state<HTMLInputElement | null>(null);
$effect(() => {
if (selectedProduct && gramsInput) {
setTimeout(() => gramsInput?.focus(), 50);
}
});
function handleSearch(value: string) { function handleSearch(value: string) {
q = value; q = value;
clearTimeout(debounceTimer); clearTimeout(debounceTimer);
@ -113,11 +123,11 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg> </svg>
<input <input
bind:this={searchInput}
type="search" type="search"
placeholder="Search foods…" placeholder="Search foods…"
value={q} value={q}
oninput={(e) => handleSearch(e.currentTarget.value)} oninput={(e) => handleSearch(e.currentTarget.value)}
autofocus
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl pl-9 pr-4 py-2.5 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-green-500 transition-colors" class="w-full bg-zinc-900 border border-zinc-700 rounded-xl pl-9 pr-4 py-2.5 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-green-500 transition-colors"
/> />
</div> </div>
@ -224,6 +234,7 @@
class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center" class="w-11 h-11 rounded-xl bg-zinc-800 hover:bg-zinc-700 transition-colors text-lg font-medium flex items-center justify-center"
>−</button> >−</button>
<input <input
bind:this={gramsInput}
type="number" type="number"
bind:value={grams} bind:value={grams}
min="1" min="1"

7
src/routes/(app)/diary/[date]/edit-entry/[entry_id]/+page.svelte
View file

@ -25,6 +25,11 @@
let saving = $state(false); let saving = $state(false);
let deleting = $state(false); let deleting = $state(false);
let gramsInput = $state<HTMLInputElement | null>(null);
$effect(() => {
if (entry && gramsInput) gramsInput.focus();
});
const preview = $derived(entry ? { const preview = $derived(entry ? {
calories: Math.round(entry.product.calories * grams / 100), calories: Math.round(entry.product.calories * grams / 100),
protein: Math.round(entry.product.protein * grams / 100 * 10) / 10, protein: Math.round(entry.product.protein * grams / 100 * 10) / 10,
@ -113,12 +118,12 @@
class="w-12 h-12 rounded-xl bg-zinc-900 hover:bg-zinc-800 transition-colors text-xl font-medium flex items-center justify-center" class="w-12 h-12 rounded-xl bg-zinc-900 hover:bg-zinc-800 transition-colors text-xl font-medium flex items-center justify-center"
>−</button> >−</button>
<input <input
bind:this={gramsInput}
type="number" type="number"
bind:value={grams} bind:value={grams}
min="1" min="1"
max="5000" max="5000"
inputmode="decimal" inputmode="decimal"
autofocus
class="flex-1 bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-center text-2xl font-semibold focus:outline-none focus:border-green-500 transition-colors" class="flex-1 bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-center text-2xl font-semibold focus:outline-none focus:border-green-500 transition-colors"
/> />
<button <button