Add optional selectOnTab prop #505
Conversation
|
Hi. I'd like to review and help you land this. I was going to work on it until I noticed this diff :) |
| @@ -581,7 +583,12 @@ export default class Autosuggest extends Component { | |||
|
|
|||
| break; | |||
|
|
|||
| // Tab (must fall through to enter when conditions apply!) | |||
| case 9: | |||
| if (!this.props.selectOnTab) break; | |||
There was a problem hiding this comment.
IMO, I believe Tabbing is heavily used as an "autocomplete" feature. That being said I feel that tabbing should automatically select the first item in the suggestions list if none are highlighted. "Enter", however should continue to remain dependent on a highlighted suggestion
There was a problem hiding this comment.
I don't. I would suggest that using the up/down arrow key to select then tab selects the item.
There was a problem hiding this comment.
Hello guys,
I will migrate to this component at the moment, and I've tested the current version with screen readers. The long story made short, the suggestions are not read. I will most likely prepare a PR to improve it in that sense.
As of the keyboard requirements for accessibility, the UX rules normally are:
Keyboard Interaction
- UP and DOWN: Cycles through auto-suggestions and input field.
- ESC: Close the list with options
- ENTER: Select the currently focused auto-suggestion and close the menu.
- TAB: Select the currently focused auto-suggestion, close the menu, and move focus to the next focusable element.
I hope this helps to figure out the expected behaviour
| <a name="selectOnTabProp"></a> | ||
| #### selectOnTab (optional) | ||
|
|
||
| Makes the tab key act identical to the enter key, allowing it to select the highlighted suggestion. |
|
Is this still not resolved? Just FYI, outside of the coding world, EVERYONE uses tab before they use ENTER. Most data entry is done very fast and the need for tabbing is far more required than the need for enter. |
|
Not resolved indeed. I've just been using my own fork in my projects. Works perfectly. |
|
Hi! Thank you for the contribution. You mentioned a couple of old PRs that were closed because it's not quite obvious what should be accessible behavior after pressing So even if we make it optional it's not quite obvious that it should work like |
|
It just makes sense to me and was requested by the client and designer in the project I used |
|
What if someone’s client wants it to behave like down key? I think we should make the behavior customizable. Not sure how to implement it properly for now. But I think we should look in this direction and research how it’s implemented in other similar libraries. |
componentWillReceiveProps -> UNSAFE_componentWillReceiveProps
Added optional
selectOnTabproperty that makes the tab key act identical to the enter key. This feature has been requested multiple times before (as seen in #164, #163, #34, #332 etc). This pull requests adds the named property as well as multiple tests.