@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

[robsontenorio]

@joshuapease Have you found a solution?

[SpyridonLaz]

bump. this should be fixed as it makes searchable boxes a nightmare

[joshuapease]

Hey everyone! Been busy with client projects, but had a bit of free time to dig back in to this.

I've been experimenting with two ways of customizing displayCheck.

I have some Draft PRs with code, but would love to discuss this with the Alpine JS maintainers before actually opening PRs in this repo (there might be better ways of doing this).

Option 1 - Make the focus plugin a factory function.

• Adds configurable factory function to focus plugin. joshuapease/alpine#2

This allows us to pass a config object to the plugin.

I tried to write this in a way that also maintains backwards compatibility.

// Existing code - no changes needed
Alpine.plugin(focus)

// New configuration options
Alpine.plugin(focus({ displayCheck: 'full' }))    // Include hidden elements
Alpine.plugin(focus({ displayCheck: 'none' }))    // Skip hidden elements (default)

Option 2 - displayCheck() chainable method.

• Adds chainable displayCheck() method to $focus joshuapease/alpine#1

Takes inspiration from $focus.within($myref).first().

Chaining .displayCheck('full') enables that settings for your specific call.

Usage:

$focus.displayCheck('full') is chained with your function calls.

// Examples
this.$focus.displayCheck('full').next()
this.$focus.displayCheck('full').previous()

---

Would love to hear from the maintainers of Alpine if this is a customization we could add to the focus plugin. It unlocks a lot of possibilities, especially when dealing with hidden nav, dropdowns, accordions groups, etc.

[jonnitto]

I'm not a maintainer, but if I could choose one, I would prefer option 2, as it allows to set it per usage. But why not add both, so you could set a default behavior and override if needed?