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

Controlled mode keyboard tab navigation always triggers menu in AutoSuggest #2309

Closed
hchokshi opened this issue Oct 9, 2019 · 3 comments · Fixed by #2310

Comments

@hchokshi
Copy link
Member

commented Oct 9, 2019

Describe the bug; what happened?
When using the auto-suggest component in controlled mode (passing value prop, and updating it from onValueChange) with the keyboard, the suggestion menu is always triggered when tabbing out of the input text box.

What are the steps to reproduce the issue?
Create an auto suggest in controlled mode - value={this.state.input} and onValueChange={value => this.setState ...}. Create some mock function or something to population AutoSuggestOption children on input.

Tab to the input, type into it, select an option using the keyboard. When you press tab next, to move onto something else, the menu will trigger.

The root cause is because handleInputRegionKeydown has a default case which calls this.updateValue() and this.focusOnInput(). updateValue always calls this.toggleMenu(true) when props.value !== undefined which triggers the menu.

Additionally, the focusOnInput call makes this a key accessibility bug - if elements are covered by the auto-suggest menu, these elements are always hidden under the menu since you can't tab away from the input without opening the menu.

What behavior did you expect?
Pressing tab would not trigger the default case that opens the menu and refocuses the input.

In what environment did you see the issue?
Observed in Edge Chromium on Windows, would be reproducible on all supported browsers/OS.

  • Version [e.g. 1.8.0]
    @microsoft/fast-components-react-base - 4.14.3
    Code is there in latest master, as of writing.

Is there any additional context?
The fix may be as simple as an empty case (keyCode): break for tab, depending on what the intended behaviour for tab with inactive menu is.

@triage-new-issues triage-new-issues bot added the triage label Oct 9, 2019
@triage-new-issues triage-new-issues bot removed the triage label Oct 9, 2019
@chrisdholt

This comment has been minimized.

Copy link
Member

commented Oct 9, 2019

Thanks @hchokshi - do you want to send a PR?

@hchokshi

This comment has been minimized.

Copy link
Member Author

commented Oct 9, 2019

Sure @chrisdholt, I'll try push one by EOD today.

@chrisdholt

This comment has been minimized.

Copy link
Member

commented Oct 9, 2019

Awesome, thx - will look for it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.