Broadcast specific events for picking or typing to update the value in a combobox
This commit is contained in:
parent
610ba92bac
commit
bdae524618
|
@ -36,5 +36,7 @@
|
||||||
{getOptionLabel}
|
{getOptionLabel}
|
||||||
{getOptionValue}
|
{getOptionValue}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
on:pick
|
||||||
|
on:type
|
||||||
/>
|
/>
|
||||||
</Field>
|
</Field>
|
||||||
|
|
|
@ -40,8 +40,15 @@
|
||||||
open = false
|
open = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const onChange = e => {
|
const onType = e => {
|
||||||
selectOption(e.target.value)
|
const value = e.target.value
|
||||||
|
dispatch("type", value)
|
||||||
|
selectOption(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPick = value => {
|
||||||
|
dispatch("pick", value)
|
||||||
|
selectOption(value)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -62,7 +69,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
on:focus={() => (focus = true)}
|
on:focus={() => (focus = true)}
|
||||||
on:blur={() => (focus = false)}
|
on:blur={() => (focus = false)}
|
||||||
on:change={onChange}
|
on:change={onType}
|
||||||
value={value || ""}
|
value={value || ""}
|
||||||
placeholder={placeholder || ""}
|
placeholder={placeholder || ""}
|
||||||
{disabled}
|
{disabled}
|
||||||
|
@ -99,7 +106,7 @@
|
||||||
role="option"
|
role="option"
|
||||||
aria-selected="true"
|
aria-selected="true"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
on:click={() => selectOption(getOptionValue(option))}
|
on:click={() => onPick(getOptionValue(option))}
|
||||||
>
|
>
|
||||||
<span class="spectrum-Menu-itemLabel"
|
<span class="spectrum-Menu-itemLabel"
|
||||||
>{getOptionLabel(option)}</span
|
>{getOptionLabel(option)}</span
|
||||||
|
|
Loading…
Reference in New Issue