Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
joegaudet opened this issue Aug 19, 2020 · 4 comments
Open

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

joegaudet opened this issue Aug 19, 2020 · 4 comments

Comments

@joegaudet
Copy link

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
Copy link
Author

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants