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>