danharrin/alpine-tailwind-components

bug: space key close the dropdown

Opened this issue · 2 comments

ammadeuss commented

When I am typing "United K" (with space), the dropdown closes automatically before select any option.

mginod commented

Hello @danharrin,

it seems this issue is caused by the <button> tag which catches the space key event before the <input>.
I created a code pen and replaced the <button> tag with a <div> and it seems to work. I added
tabindex="1" so the element can be focused and @keydown.space="if(!open) toggleListboxVisibility()" so the element can be opened by pressing the space key only if the listbox is not shown yet.

Here is the link to the codepen: https://codepen.io/mathieuatk/pen/VwmwmVY

I'm not sure of the consequences regarding accessibility when replacing the <button> tag with a <div> though.

  • 👍1
delta1186 commented

@danharrin adding @keyup.space.stop.prevent to the search input worked for me. Keeps the space from bubbling up to the button. Thanks @mginod for the button information. That helped me figure this out.

<input
        x-ref="search"
        x-show="open"
        x-model="search"
        @keyup.space.stop.prevent
        @keydown.enter.stop.prevent="selectOption()"
        @keydown.arrow-up.stop.prevent="focusPreviousOption()"
        @keydown.arrow-down.stop.prevent="focusNextOption()"
        type="search"
        class="w-full h-full border-none p-0 focus:outline-none focus:ring-transparent"
    />

Also made some updates to the class attribute. :)

  • 👍1