@alpinejs/focus Configurable displayCheck setting

[joshuapease]

I've run into some issues building a disclosure navigation and using the focus plugin.

Child menu items are hidden using x-show (making them display: none).

When I use @keydown.down="$focus.wrap().next()" and @keydown.up="$focus.wrap().previous()" focus halts when the next focusable element is hidden.

My best guess is that tabbable is finding the hidden element, but is unable to focus on it since it's hidden.

If I manually modify the plugin to use displayCheck: 'full' I get the behavior I'd expect.

Here's the spot I would modify.

alpine/packages/focus/src/index.js

Lines 36 to 40 in ab743bc

	focusables() {
	if (Array.isArray(within)) return within
	return focusable(within, { displayCheck: 'none' })
	},

It seems like other folks have encountered this too:

• `$focus.next()` fails to focus the next tabbable element #4228