{#if titleText} {titleText} {/if} {#if !inline && helperText} {/if} {#if invalid} {/if} { if (filterable) { open = true; inputRef.focus(); } else { open = !open; } }} on:keydown={({ key }) => { if (filterable) { return; } if (key === ' ') { open = !open; } else if (key === 'Tab') { if (selectionRef && checked.length > 0) { selectionRef.focus(); } else { open = false; fieldRef.blur(); } } else if (key === 'ArrowDown') { change(1); } else if (key === 'ArrowUp') { change(-1); } else if (key === 'Enter') { if (highlightedIndex > -1) { sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; } } }} on:blur={({ relatedTarget }) => { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { fieldRef.focus(); } }} {id} {disabled} {translateWithId}> {#if checked.length > 0} { sortedItems = sortedItems.map((item) => ({ ...item, checked: false, })); fieldRef.blur(); }} {translateWithId} {disabled} /> {/if} {#if filterable} { inputValue = target.value; }} on:keydown on:keydown|stopPropagation={({ key }) => { if (key === 'Enter') { if (highlightedIndex > -1) { sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; } } else if (key === 'Tab') { open = false; } else if (key === 'ArrowDown') { change(1); } else if (key === 'ArrowUp') { change(-1); } }} on:focus on:blur on:blur={({ relatedTarget }) => { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { inputRef.focus(); } }} {disabled} {placeholder} {id} {name} value={inputValue} /> {#if invalid} {/if} {#if inputValue} { inputValue = ''; open = false; }} {translateWithId} {disabled} {open} /> {/if} { open = !open; }} {translateWithId} {open} /> {/if} {#if !filterable} {label} {/if} {#if open} {#each filterable ? filteredItems : sortedItems as item, i (item.id || i)} { sortedItems = sortedItems.map((_) => _.id === item.id ? { ..._, checked: !_.checked } : _ ); fieldRef.focus(); }} on:mouseenter={() => { highlightedIndex = i; }}> {/each} {/if}