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

Merge pull request #208 from IBM/fix-combobox

Browse source 
fix(combo-box): close menu on Escape key
This commit is contained in:
Eric Liu 2020-07-19 14:50:47 -07:00 • committed by GitHub
commit b817885b32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/ComboBox/ComboBox.Story.svelte
View file

@ -30,7 +30,6 @@
} }
</script> </script>
<p>Currently, this component does not support items as slots.</p>
<p> <p>
<code>items</code> <code>items</code>
must be an array of objects; mandatory fields are `id` and `text`. must be an array of objects; mandatory fields are `id` and `text`.
@ -47,8 +46,9 @@
size="small" size="small"
on:click={() => { on:click={() => {
selectedIndex = 1; selectedIndex = 1;
}}> }}
Set item to 'Option 2' style="margin-top: 1rem;">
Set item to "Option 2"
</Button> </Button>
</div> </div>
<div style="width: 300px; margin-top: 2rem;"> <div style="width: 300px; margin-top: 2rem;">

2
src/ComboBox/ComboBox.svelte
View file

@ -137,6 +137,8 @@
change(1); change(1);
} else if (key === 'ArrowUp') { } else if (key === 'ArrowUp') {
change(-1); change(-1);
} else if (key === 'Escape') {
open = false;
} }
}} }}
on:focus on:focus

3
src/Dropdown/Dropdown.Story.svelte
View file

@ -21,7 +21,6 @@
<DropdownSkeleton inline /> <DropdownSkeleton inline />
</div> </div>
{:else} {:else}
<p>Currently, this component does not support items as slots.</p>
<p> <p>
<code>items</code> <code>items</code>
must be an array of objects; mandatory fields are `id` and `text`. must be an array of objects; mandatory fields are `id` and `text`.
@ -35,7 +34,7 @@
on:click={() => { on:click={() => {
selectedIndex = selectedIndex > -1 ? -1 : 1; selectedIndex = selectedIndex > -1 ? -1 : 1;
}}> }}>
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"} {selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
</Button> </Button>
</div> </div>
<div style="width: 300px"> <div style="width: 300px">

4
src/Dropdown/Dropdown.stories.js
View file

@ -26,10 +26,6 @@ export const Default = () => ({
disabled: boolean("Disabled (disabled)", false), disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false), light: boolean("Light variant (light)", false),
titleText: text("Title (titleText)", "This is not a dropdown title."), titleText: text("Title (titleText)", "This is not a dropdown title."),
helperText: text(
"Helper text (helperText)",
"This is not some helper text."
),
invalid: boolean("Show form validation UI (invalid)", false), invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text( invalidText: text(
"Form validation UI content (invalidText)", "Form validation UI content (invalidText)",