Refactor alias filter select component to use native select element
- Replaced the custom select component with a native HTML select element for improved performance and accessibility. - Simplified value change handling by directly binding the select's value and updating the onChange event. - Ensured the selected value defaults to "all" if not present in available aliases, enhancing user experience.
This commit is contained in:
@@ -1,6 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import * as Select from "$lib/components/ui/select/index.js";
|
|
||||||
|
|
||||||
let {
|
let {
|
||||||
availableAliases = [],
|
availableAliases = [],
|
||||||
value = $bindable("all"),
|
value = $bindable("all"),
|
||||||
@@ -16,34 +14,25 @@
|
|||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// Не сбрасываем выбранный alias автоматически:
|
|
||||||
// во время загрузки список может быть временно пустым, что
|
|
||||||
// приводило к возврату на "all" сразу после выбора.
|
|
||||||
if (!value) value = "all";
|
if (!value) value = "all";
|
||||||
|
if (value !== "all" && !availableAliases.includes(value)) value = "all";
|
||||||
});
|
});
|
||||||
|
|
||||||
let selectedLabel = $derived((value ?? "all") === "all" ? allLabel : (value ?? "all"));
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<label class="text-xs text-muted-foreground">
|
<label class="text-xs text-muted-foreground">
|
||||||
{label}
|
{label}
|
||||||
<Select.Root
|
<select
|
||||||
type="single"
|
class="border-input bg-background mt-1 h-8 w-[220px] rounded-lg border px-2.5 text-sm outline-none focus-visible:border-ring"
|
||||||
bind:value
|
bind:value
|
||||||
onValueChange={(next) => {
|
onchange={(e) => {
|
||||||
const normalized = Array.isArray(next) ? String(next[0] ?? "all") : String(next ?? "all");
|
const next = (e.currentTarget as HTMLSelectElement).value || "all";
|
||||||
value = normalized;
|
value = next;
|
||||||
onValueChange?.(normalized);
|
onValueChange?.(next);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Select.Trigger class="mt-1 w-[220px]">
|
<option value="all">{allLabel}</option>
|
||||||
{selectedLabel}
|
{#each availableAliases as alias (alias)}
|
||||||
</Select.Trigger>
|
<option value={alias}>{alias}</option>
|
||||||
<Select.Content class="z-[1200]">
|
{/each}
|
||||||
<Select.Item value="all">{allLabel}</Select.Item>
|
</select>
|
||||||
{#each availableAliases as alias (alias)}
|
|
||||||
<Select.Item value={alias}>{alias}</Select.Item>
|
|
||||||
{/each}
|
|
||||||
</Select.Content>
|
|
||||||
</Select.Root>
|
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
Reference in New Issue
Block a user