fix(ui/browse): use value prop on select elements to fix filter state
Replace selected={data.x === opt.value} on individual <option> elements
with value={data.x} on the <select> — the idiomatic Svelte approach that
ensures correct hydration and form submission of the current filter values.
This commit is contained in:
@@ -91,28 +91,31 @@
|
|||||||
|
|
||||||
<select
|
<select
|
||||||
name="genre"
|
name="genre"
|
||||||
|
value={data.genre}
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
||||||
>
|
>
|
||||||
{#each genres as g}
|
{#each genres as g}
|
||||||
<option value={g.value} selected={data.genre === g.value}>{g.label}</option>
|
<option value={g.value}>{g.label}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
name="sort"
|
name="sort"
|
||||||
|
value={data.sort}
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
||||||
>
|
>
|
||||||
{#each sorts as s}
|
{#each sorts as s}
|
||||||
<option value={s.value} selected={data.sort === s.value}>{s.label}</option>
|
<option value={s.value}>{s.label}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
name="status"
|
name="status"
|
||||||
|
value={data.status}
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
||||||
>
|
>
|
||||||
{#each statuses as st}
|
{#each statuses as st}
|
||||||
<option value={st.value} selected={data.status === st.value}>{st.label}</option>
|
<option value={st.value}>{st.label}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user