Prevent space from closing Dropdown menu

[ChristianVaughn]

Is there a way to prevent spacebar from closing the dropdown menu? I am trying to add an input field or combo box into the menu so I can have a way to filter through the available menu options, but whenever I try to add a space when typing in my input box, the menu closes so you cant search for something that is more than one word, I am also unable to navigate with arrow keys to the input box. I could be totally misusing this type of UI element, and might need to create something of my own, but wasnt sure when trying to make this

<Transition show={$menu.expanded}>
<div
    use:menu.items
    class="z-20 absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white"
>
    <div class="search-bar px-1 py-1">
        <input
            bind:value={searchInput}
            on:input={onInput}
            type="text"
            placeholder="Find a Playlist"
        />
    </div>
    {#each groups as group}
        <div class="px-1 py-1">
            {#each group as option}
                {@const active = $menu.active === option.text}
                <button
                    use:menu.item
                    class="menu-item flex w-full items-center rounded-md {active
                        ? 'menu-item-active'
                        : 'menu-item-inactive'}"
                >
                    <svelte:component this={option.icon} class="mr-2 h-5 w-5" {active} />
                    {option.text}
                </button>
            {/each}
        </div>
    {/each}
</div>
</Transition>

[ChristianVaughn]

I ended up just changing the UI to have a button that brought up a dialog with a combo box. That seemed like the more accessible thing to do instead of trying to get space to not close the dropdown