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

fix(ComboBox): handling TAB behaviour

Browse source
This commit is contained in:
István Pató 2022-09-07 13:00:45 +02:00
commit a965f3193c
2 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
import { ComboBox } from "carbon-components-svelte"; import { ComboBox } from "carbon-components-svelte";
let selectedId
function shouldFilterItem(item, value) { function shouldFilterItem(item, value) {
if (!value) return true; if (!value) return true;
return item.text.toLowerCase().includes(value.toLowerCase()); return item.text.toLowerCase().includes(value.toLowerCase());
@ -8,6 +9,7 @@
</script> </script>
<ComboBox <ComboBox
bind:selectedId
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{[ items="{[
@ -16,4 +18,5 @@
{ id: '2', text: 'Fax' }, { id: '2', text: 'Fax' },
]}" ]}"
shouldFilterItem="{shouldFilterItem}" shouldFilterItem="{shouldFilterItem}"
/> helperText="selectedId: {selectedId}"
/>

4
src/ComboBox/ComboBox.svelte
View file

@ -289,7 +289,7 @@
if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) { if (['Enter', 'ArrowDown', 'ArrowUp'].includes(key)) {
e.preventDefault(); e.preventDefault();
} }
if (key === 'Enter') { if (key === 'Enter' || key === 'Tab') {
open = !open; open = !open;
if ( if (
highlightedIndex > -1 && highlightedIndex > -1 &&
@ -317,8 +317,6 @@
} }
} }
highlightedIndex = -1; highlightedIndex = -1;
} else if (key === 'Tab') {
open = false;
} else if (key === 'ArrowDown') { } else if (key === 'ArrowDown') {
change(1); change(1);
} else if (key === 'ArrowUp') { } else if (key === 'ArrowUp') {