Using the on-key modifier in a list, binds to all list items.

[joegaudet]

Hey,

Love the on-key modifier, however when using it in a list I observe the following:

<ul>
{{#each listItems as |item|}}
<li {{on-key 'Enter' (alert item.name}})>tabindex="0">{{item.name}}</li>
{{/each}}
</ul>

When I focus the list item and hit enter, I see an alert triggered for each of the items.

Any guidance on this?

[joegaudet]

The solution for now appears to be this:

 {{on-key 'Enter' onlyWhenFocused=true}}
{{on-key 'Space' onlyWhenFocused=true}}

Not super ideal, seems like the default behavior for this modifier would be to work on focused items.

[lukemelia]

I had a good chat with @joegaudet on Discord. He is going to work on a PR to make onlyWhenFocused default to true when the modifier is on an element with a tabindex that makes it focusable. This will be a breaking change and will be part of a 7.0 release.

[lukemelia]

The above plan was scrapped because button elements have a default tabindex of 0, so the contemplated change would break the common button keyboard shortcut use case.

[lukemelia]

The resolution on this for the time being is for @joegaudet to experiment with subclassing OnKeyModifier in his app to have a modifier that has the defaults his app commonly needs.