Refactor alias selection logic in AliasFilterSelect component

- Introduced internal state management for alias selection, improving responsiveness to changes in the selected value.
- Enhanced the effect handling to ensure the internal value remains consistent with available aliases, preventing invalid selections.
- Updated the binding in the Select component to use the internal state, streamlining the alias selection process.
This commit is contained in:
Denozordec
2026-03-30 23:00:27 +07:00
parent 23f71378d3
commit 309750fd25
@@ -13,12 +13,26 @@
allLabel?: string; allLabel?: string;
} = $props(); } = $props();
let selectedLabel = $derived(value === "all" ? allLabel : value); let internalValue = $state(value ?? "all");
$effect(() => {
const next = value ?? "all";
if (internalValue !== next) internalValue = next;
});
$effect(() => {
if (internalValue !== "all" && !availableAliases.includes(internalValue)) {
internalValue = "all";
}
if (value !== internalValue) value = internalValue;
});
let selectedLabel = $derived(internalValue === "all" ? allLabel : internalValue);
</script> </script>
<label class="text-xs text-muted-foreground"> <label class="text-xs text-muted-foreground">
{label} {label}
<Select.Root type="single" bind:value> <Select.Root type="single" bind:value={internalValue}>
<Select.Trigger class="mt-1 w-[220px]"> <Select.Trigger class="mt-1 w-[220px]">
{selectedLabel} {selectedLabel}
</Select.Trigger> </Select.Trigger>