mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(combo-box): dispatch select, clear events

Browse source 
Also fixes a bug where the selectedId isn't reset when clearing the selection.
This commit is contained in:
Eric Liu 2020-07-28 18:46:12 -07:00
commit 8dbcf17e89
2 changed files with 22 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/ComboBox/ComboBox.svelte
View file

@ -111,7 +111,7 @@
*/
export let ref = null;
import { afterUpdate } from "svelte";
import { createEventDispatcher, afterUpdate } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import {
ListBox,
@ -122,6 +122,8 @@
ListBoxSelection,
} from "../ListBox";
const dispatch = createEventDispatcher();
let selectedId = undefined;
let inputValue = "";
let highlightedIndex = -1;
@ -145,9 +147,18 @@
} else {
highlightedIndex = -1;
inputValue = selectedItem ? selectedItem.text : "";
if (!selectedItem) {
selectedId = undefined;
selectedIndex = -1;
}
}
});
$: if (selectedIndex > -1) {
selectedId = items[selectedIndex].id;
dispatch("select", { selectedId, selectedIndex, selectedItem });
}
$: ariaLabel = $$props["aria-label"] || "Choose an item";
$: menuId = `menu-${id}`;
$: comboId = `combo-${id}`;
@ -222,6 +233,7 @@
open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
selectedId = items[selectedIndex].id;
open = false;
}
} else if (key === 'Tab') {
@ -250,6 +262,7 @@
{/if}
{#if inputValue}
<ListBoxSelection
on:clear
on:clear={() => {
selectedIndex = -1;
open = false;