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

Merge fce7de17ab into 4881ff7ffd

Browse source
This commit is contained in:
jorgebv 2024-11-12 05:24:23 +00:00 • committed by GitHub
commit 7f4a335196
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/MultiSelect/MultiSelect.svelte
View file

@ -185,6 +185,7 @@
let highlightedIndex = -1; let highlightedIndex = -1;
let prevChecked = []; let prevChecked = [];
let inputFocused = false;
setContext("MultiSelect", { setContext("MultiSelect", {
declareRef: ({ key, ref }) => { declareRef: ({ key, ref }) => {
@ -320,6 +321,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'}"
@ -379,7 +381,6 @@
}}" }}"
on:focus="{() => { on:focus="{() => {
if (filterable) { if (filterable) {
open = true;
if (inputRef) inputRef.focus(); if (inputRef) inputRef.focus();
} }
}}" }}"
@ -422,6 +423,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') {
@ -449,7 +455,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}"
@ -471,7 +483,6 @@
/> />
{/if} {/if}
<ListBoxMenuIcon <ListBoxMenuIcon
style="pointer-events: {open ? 'auto' : 'none'}"
on:click="{(e) => { on:click="{(e) => {
e.stopPropagation(); e.stopPropagation();
open = !open; open = !open;