Recreating Select2 with bits-ui

[AlexJMohr]

For those unfamiliar, select2 is a jQuery <select> enhancement lib which adds searching and ajax functionality. Specifically for my usecase, I want a multiple select with search and ajax, like in this example screenshot:

Features:

• "chips" (tags) rendered for each selected option in the trigger "search" bar
• search input is inline after the chips

I think the closest thing in bits-ui is Combobox, but the Combobox.Input shows the last selected item, whereas I want the input's value to clear (or optionally retain its current search value when an item is selected, i.e. select2's closeOnSelect option, which has this side effect). I don't see any options on Combobox.Input which could achieve this behaviour. Perhaps if the value were bindable, but I'm not sure of the implications of that.

If you think Combobox is the wrong approach, I'd appreciate any suggestions.

My combobox attempt:

<Combobox.Root
    {...restProps}
    bind:value
    bind:open
    {items}
    onOpenChange={(open) => {
        if (!open) searchValue = "";
    }}
    onValueChange={() => {
        searchValue = "" // attempt at clearing Combobox.Input's value... doesn't work
    }}
    type="multiple"
>
    <div class="combobox" bind:this={floatingAnchor}>
        <div class="selected-items">
            {#each selectedItems as item, i (i + item.value)}
                <div class="selected-item">
                    <button
                        type="button"
                        aria-label="Remove {item.label}"
                        class="remove-item-btn"
                        onclick={() => {
                            value = value?.filter((v) => v !== item.value);
                        }}
                    >
                        &times;
                    </button>
                    <span>{item.label}</span>
                </div>
            {/each}

            <Combobox.Input
                oninput={(e) => (searchValue = e.currentTarget.value)}
                autocomplete="off"
                onclick={() => (open = true)}
                clearOnDeselect
            >
                {#snippet child({ props })}
                    <input type="text" class="search-input" {...props} />
                {/snippet}
            </Combobox.Input>
        </div>

        <Combobox.Trigger>
            {#snippet child({ props })}
                <button
                    type="button"
                    class="combobox-btn"
                    class:open
                    {...props}
                >
                    <Glyphicon icon="chevron-down" />
                </button>
            {/snippet}
        </Combobox.Trigger>
    </div>

    <Combobox.Portal>
        <Combobox.Content customAnchor={floatingAnchor} forceMount>
            {#snippet child({ props, wrapperProps, open })}
                {#if open}
                    <div class="wrapper" {...wrapperProps}>
                        <div
                            class="content"
                            {...props}
                            transition:slide={{ easing: cubicOut }}
                        >
                            {#each filteredItems as item, i (i + item.value)}
                                <Combobox.Item {...item}>
                                    {#snippet child({
                                        props,
                                        highlighted,
                                        selected,
                                    })}
                                        <div
                                            {...props}
                                            class="item"
                                            class:highlighted
                                            class:selected
                                        >
                                            {item.label}
                                        </div>
                                    {/snippet}
                                </Combobox.Item>
                            {:else}
                                <span>No results found</span>
                            {/each}
                        </div>
                    </div>
                {/if}
            {/snippet}
        </Combobox.Content>
    </Combobox.Portal>
</Combobox.Root>

[AlexJMohr]

The Tags input (#1284) might be more appropriate, if it can be optionally configured to disallow custom tags, and have a bindable input for fetching options remotely.