Focus on multiselect should not open the dropdown

chinchang commented 6 years ago

Current behaviour:

When multiselect receives focus, the dropdown shows.

Issue:

For people who use keyboard for navigation, they need to keep hitting Tab key to cycle through element. While cycling through the elements, if a multiselect receives focus, it immediately shows the dropdown - but the user isn't there to use it, just a transient focus.

Proposal:

The dropdown should open only on user action after focus, just like the native <select> element in browser. At least have a prop to do so.

wisamx commented 6 years ago

another thing, which I think is done wrong, is that when using the multiselect as tagsinput, it opens when it receives focus (it shouldn't). It should open when the user types in the input.

plweil commented 6 years ago

I agree that focus, or focus alone, should not activate the dropdown for the reasons given by @chinchang

My suggestion for 3.0: The default activate trigger should probably be typing the search string (with number of characters required to activate as an option).

I would also favor offering an option to activate the dropdown on a click event in the text input, which would simulate a "normal" dropdown. But this is not a "normal" dropdown menu; it's more of a search filter. That's why I would make this an option rather than the default behavior.

I know that figuring out all of the keyboard and click events for the input can get tricky, but I think this is a good place to start.

shentao commented 6 years ago

Thanks, I think that’s a valid suggestion. Will probably do it this way in 3.0.

andreasvirkus commented 6 years ago

I can't reproduce what @chinchang says is the issue. Once an element receives focus and a dropdown opens - pressing the tab key again will just transfer focus to the next element and doesn't start cycling through the options.

I'd say that opening the dropdown is fine and almost necessary for single select, since how else would you know to distinguish it from other fields (I'd argue that the chevron alone might not be enough).

I feel that typing is an enhancement (at least for single select type fields) and a user should be able to simply click/tab into focus and select an option.

plweil commented 6 years ago

@chinchang's point is that the dropdown should not open on what is intended to be a transient focus. On your second point/question, I think the answer is good labeling (and not just a placeholder), perhaps along with another element with more detailed instructions that is linked to the input via aria-describedby. Screenreader users won't know about the chevron, so an informative label element (and possibly more) is a must -- that goes for any form field.

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

kimvargas commented 5 years ago

@shentao I know this issue is closed and labeled won't fix, but you mentioned adding this functionality (prevent dropdown opening on focus/only open on user input) to version 3.0. Is this still the plan? Where can I find the eta on 3.0? Thanks!

shentao commented 5 years ago

It's already implemented in v3. You can try it out on the v3 branch if you’d like. Hopefully, I will be able to finish the next version in early March. Got to figure out how to handle grouping.