$focus.next() fails to focus the next tabbable element

[beautifulmim]

I've encountered a potential bug where the focus plugin fails to progress to the next focusable item when there's a hidden element in between (sort of an invisible wall. I assume it may happen for any of the conditions tabbable defines an element not tabbable). You can easily reproduce this by adding a "display: none" style to the "Second" button on the following page: https://alpinejs.dev/plugins/focus

In the wrap example is more noticeable since you can go from First to Third (pressing left cursor) button but you can't go through the Second button.

I conducted a test and $focus.getNext() is returning elements not meant to be tabbable. I think this might be related.

I encountered this behavior while implementing a custom select component with a filter input.

[marktjadu]

I've found the same issue as this with hidden elements blocking this when using arrows

[joshuapease]

I've come across this too. I believe it's due to how tabbable is configured within the focus plugin.

• `@alpinejs/focus` Configurable `displayCheck` setting #4390

I've opened a discussion to see if we can make this configurable so it will properly check for hidden elements.