From 86731ee5d4bb6a5a132f078f0ad51fcd37947df1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 10 Nov 2021 11:23:35 +0000
Subject: [PATCH] Broadcast specific events for picking or typing to update the
value in a combobox
---
packages/bbui/src/Form/Combobox.svelte | 2 ++
packages/bbui/src/Form/Core/Combobox.svelte | 15 +++++++++++----
2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
index b718921325..368e8bec4b 100644
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -36,5 +36,7 @@
{getOptionLabel}
{getOptionValue}
on:change={onChange}
+ on:pick
+ on:type
/>
</Field>
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
index 2f832ad91e..6a1390eeea 100644
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -40,8 +40,15 @@
open = false
}
- const onChange = e => {
- selectOption(e.target.value)
+ const onType = e => {
+ const value = e.target.value
+ dispatch("type", value)
+ selectOption(value)
+ }
+
+ const onPick = value => {
+ dispatch("pick", value)
+ selectOption(value)
}
</script>
@@ -62,7 +69,7 @@
type="text"
on:focus={() => (focus = true)}
on:blur={() => (focus = false)}
- on:change={onChange}
+ on:change={onType}
value={value || ""}
placeholder={placeholder || ""}
{disabled}
@@ -99,7 +106,7 @@
role="option"
aria-selected="true"
tabindex="0"
- on:click={() => selectOption(getOptionValue(option))}
+ on:click={() => onPick(getOptionValue(option))}
>
<span class="spectrum-Menu-itemLabel"
>{getOptionLabel(option)}</span