{#if titleText || $$slots.titleText} {titleText} {/if} {#if invalid} {/if} {#if !invalid && warn} {/if} { if (disabled) return; if (filterable) { open = true; inputRef.focus(); } else { open = !open; } }} on:keydown={(e) => { if (filterable) { return; } const key = e.key; if ([" ", "ArrowUp", "ArrowDown"].includes(key)) { e.preventDefault(); } if (key === " ") { open = !open; } else if (key === "Tab") { if (selectionRef && checked.length > 0) { selectionRef.focus(); } else { open = false; } } else if (key === "ArrowDown") { change(1); } else if (key === "ArrowUp") { change(-1); } else if (key === "Enter") { if (highlightedIndex > -1) { sortedItems = sortedItems.map((item, i) => { if (i !== highlightedIndex) return item; return { ...item, checked: !item.checked }; }); } } else if (key === "Escape") { open = false; } }} on:focus={() => { if (filterable) { open = true; if (inputRef) inputRef.focus(); } }} on:blur={(e) => { if (!filterable) dispatch("blur", e); }} {id} {disabled} {translateWithId} > {#if checked.length > 0} { selectedIds = []; sortedItems = sortedItems.map((item) => ({ ...item, checked: false, })); }} translateWithId={translateWithIdSelection} {disabled} /> {/if} {#if filterable} { if (key === "Enter") { if (highlightedId) { const filteredItemIndex = sortedItems.findIndex( (item) => item.id === highlightedId, ); sortedItems = sortedItems.map((item, i) => { if (i !== filteredItemIndex) return item; return { ...item, checked: !item.checked }; }); } } else if (key === "Tab") { open = false; } else if (key === "ArrowDown") { change(1); } else if (key === "ArrowUp") { change(-1); } else if (key === "Escape") { open = false; } else if (key === " ") { if (!open) open = true; } }} on:input on:keyup on:focus on:blur on:paste {disabled} {placeholder} {id} {name} /> {#if invalid} {/if} {#if value} { value = ""; open = false; }} translateWithId={translateWithIdSelection} {disabled} {open} /> {/if} { e.stopPropagation(); open = !open; }} {translateWithId} {open} /> {/if} {#if !filterable} {label} {/if}

{#each filterable ? filteredItems : sortedItems as item, i (item.id)} { if (item.disabled) { e.stopPropagation(); return; } sortedItems = sortedItems.map((_) => _.id === item.id ? { ..._, checked: !_.checked } : _, ); fieldRef.focus(); }} on:mouseenter={() => { if (item.disabled) return; highlightedIndex = i; }} > { if (i === filteredItems.length - 1) open = false; }} > {itemToString(item)} {/each}

{#if !inline && !invalid && !warn && helperText} {/if}