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

change focus handling behavior

Browse source
This commit is contained in:
Jorge Vergara 2023-02-08 14:32:28 -05:00
commit fce7de17ab
1 changed files with 13 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/MultiSelect/MultiSelect.svelte
View file

@ -186,6 +186,7 @@
let initialSorted = false; let initialSorted = false;
let highlightedIndex = -1; let highlightedIndex = -1;
let prevChecked = []; let prevChecked = [];
let inputFocused = false;
setContext("MultiSelect", { setContext("MultiSelect", {
declareRef: ({ key, ref }) => { declareRef: ({ key, ref }) => {
@ -316,6 +317,7 @@
class="bx--multi-select {direction === 'top' && class="bx--multi-select {direction === 'top' &&
'bx--list-box--up'} {filterable && 'bx--combo-box'} 'bx--list-box--up'} {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'} {filterable && 'bx--multi-select--filterable'}
{filterable && inputFocused && 'bx--multi-select--filterable--input-focused'}
{invalid && 'bx--multi-select--invalid'} {invalid && 'bx--multi-select--invalid'}
{inline && 'bx--multi-select--inline'} {inline && 'bx--multi-select--inline'}
{checked.length > 0 && 'bx--multi-select--selected'}" {checked.length > 0 && 'bx--multi-select--selected'}"
@ -375,7 +377,6 @@
}}" }}"
on:focus="{() => { on:focus="{() => {
if (filterable) { if (filterable) {
open = true;
if (inputRef) inputRef.focus(); if (inputRef) inputRef.focus();
} }
}}" }}"
@ -417,6 +418,11 @@
class:bx--text-input="{true}" class:bx--text-input="{true}"
class:bx--text-input--empty="{value === ''}" class:bx--text-input--empty="{value === ''}"
class:bx--text-input--light="{light}" class:bx--text-input--light="{light}"
on:input="{() => {
if (!open) {
open = true;
}
}}"
on:keydown on:keydown
on:keydown|stopPropagation="{({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
@ -444,7 +450,13 @@
}}" }}"
on:keyup on:keyup
on:focus on:focus
on:focus="{() => {
inputFocused = true;
}}"
on:blur on:blur
on:blur="{() => {
inputFocused = false;
}}"
on:paste on:paste
disabled="{disabled}" disabled="{disabled}"
placeholder="{placeholder}" placeholder="{placeholder}"