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

Add option to not close select on tab keypress #1218

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

kstinson14
Copy link
Contributor

I would like to add an optional property to the power-select component to allow the dropdown to stay open on a "Tab" keypress. You currently can pass the onkeydown method to the component and do some customization that way. You can then return false in this method to prevent the default closing behavior from occurring. But my use case involves tabbing through / focusing content within the dropdown portion of the select. If I were to return false in onkeydown, the default browser focus behavior would also be prevented. Creating this property allows the power-select's default tab behavior to be avoided, while allowing the browser's default tab behavior to be preserved.

@cibernox
Copy link
Owner

cibernox commented Apr 9, 2019

@kstinson14 I'm not sure about this:

If I were to return false in onkeydown, the default browser focus behavior would also be prevented

AFAIK, returning false from onkeydown does not prevent any native browser behavior whatsoever, only the default behavior of the select (unless you call event.preventDefault()).

Can you check that and explain a bit more why returning false doesn't work for your use case?

@kstinson14
Copy link
Contributor Author

kstinson14 commented Apr 10, 2019

@cibernox Sorry, I should've included this in the original post: I have an ember-twiddle here that better shows what I mean. If you have an onkeydown handler on an input that returns false, it prevents the focus from changing to the next element in the tab order. You can see this in the second input / button pair in the twiddle.

I also put a small power-select example in there that displays the problem more explicitly. When you click on the trigger to open the component, there are buttons in each of the options. But they can't be tabbed to, because the search input's onkeydown handler returns false. If you alter the power-select component to have searchEnabled=false, the buttons become tab-able, since the input's onkeydown event won't get in the way.

@kstinson14
Copy link
Contributor Author

@cibernox Realized I didn't add the attribute to power-select-multiple, should be fixed now.

@RobbieTheWagner
Copy link
Collaborator

@kstinson14 I realize this is super old, but could you please rebase and fix conflicts?

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

Successfully merging this pull request may close these issues.

3 participants