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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user