@keydown.shift.tab event followed by @keydown.tab event

[lanius412]

I assign @keydown.shift.tab , @keydown.tab , @keydown.up and @keydown.down to button

@keydown.shift.tab and @keydown.up : focus previous button
@keydown.tab and @keydown.down : focus next button

When keydown shift+tab,
console output:

prev suggestion
next suggestion

Is there something wrong with my code?

@isset($channels)
    <div x-show="showSuggest" x-cloak>
        <ul id="channel-suggestion-list" class="mt-2 py-2 px-3 w-full flex flex-col gap-1 bg-zinc-800 rounded">
            @forelse ($channels as $channel)
                <li>
                    <button type="button"
                        wire:click="$set('search', '{{ $channel['broadcaster_login'] }}')"
                        @click="showSuggest = false"
                        @keydown.shift.tab="prevSuggestion"
                        @keydown.tab="nextSuggestion"
                        @keydown.up="prevSuggestion"
                        @keydown.down="nextSuggestion"
                        class="w-full px-1 text-start rounded hover:bg-zinc-600 focus:outline-none focus:bg-zinc-600" >
                        {{ $channel['broadcaster_login'] }}
                    </button>
                </li>
            @empty
                <li x-cloak>
                    {{ $isEmpty }}
                </li>
            @endforelse
        </ul>
    </div>
@endisset
<script>
    const nextSuggestion = (e) => {
        console.log('next suggestion');
        e.preventDefault();
        const suggestions = document.querySelectorAll('#channel-suggestion-list button');
        const currentSuggestionIndex = [...suggestions].findIndex(elm => e.target === elm);
        if (e.target === document.querySelector('input[name="channel"]') || currentSuggestionIndex+1 === suggestions.length) {
            suggestions[0].focus();
        } else {
            suggestions[currentSuggestionIndex+1].focus();
        }
    }
    const prevSuggestion = (e) => {
        console.log('prev suggestion')
        e.preventDefault();
        const suggestions = document.querySelectorAll('#channel-suggestion-list button');
        const currentSuggestionIndex = [...suggestions].findIndex(elm => e.target === elm);
        if (currentSuggestionIndex === 0) {
            suggestions[suggestions.length-1].focus();
        } else {
            suggestions[currentSuggestionIndex-1].focus();
        }
    }
</script>

[SimoTod]

The current implementation doesn't prevent the listener to fire if another key is pressed at the same time. Even if you hold shift, you are still pressing tab.

It could be considered a bug by some but changing it could be considered a breaking change by other so you need to pitch it to the maintainer.

[lanius412]

Does this mean that it cannot be done like playground (Vue.js) ?

[ekwoka]

Currently the exact modifier does not exist.

But it could!

[lanius412]

For now, I'll replace it with a Vanilla JS onkeydown event

onkeydown="keydown(event)"
{{-- @keydown.shift.tab="prevSuggestion" --}}
{{-- @keydown.tab="nextSuggestion" --}}
{{-- @keydown.up="prevSuggestion" --}}
{{-- @keydown.down="nextSuggestion" --}}

...

const keydown = (e) => {
  // Shift + Tab
  if (e.keyCode === 9 && e.shiftKey) {
      prevSuggestion(e);
  // Tab
  } else if (e.keyCode === 9 && !e.shiftKey) {
      nextSuggestion(e);
  // Arrow Up
  } else if (e.keyCode === 38) {
      prevSuggestion(e);
  // Arrow Down
  } else if (e.keyCode === 40) {
      nextSuggestion(e)
  }
}

[ekwoka]

No need for it to be using the html attribute.

You can just put that handler on keydown in Alpine.

Specifically, only needed for the tab one.

@keydown.tab="$event.shiftKey ? prevSuggestion : nextSuggestion"

I am a bit confused about how someone is going to keydown a button...

[SimoTod]

you can just have @keydown.tab="$event.shiftKey ? prevSuggestion(e) : nextSuggestion(e)"

UPDATE: ekwoka beat me to it 😂