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

AutoSuggest component with dynamic suggestions is not accessible via keyboard #1989

Closed
hchokshi opened this issue Jul 19, 2019 · 3 comments

Comments

@hchokshi
Copy link
Member

commented Jul 19, 2019

Describe the bug; what happened?
When rendering a controlled AutoSuggest that updates children onValueChange, pressing an arrow key to navigate through the suggestions will update the input value and cause the suggestions to change making it impossible to navigate to middle items in the suggestion list

For example:
New Y suggests a list of locations, user wants to select the 2nd.
User presses down arrow to first entry New York, New York, USA, which updates the text input with this value.
Input value change causes suggestion list to update, hiding values that matched New Y but don't match New York, New York, USA.

What are the steps to reproduce the issue?
Render an <AutoSuggest> component that changes its children onValueChange in controlled mode. There is an onInvoked handler which will update the user's settings when they select a location.

onValueChange will update the user input value in parent component state, and make an API request for new suggestions. New suggestion API result will update props on the parent and the parent renders new AutoSuggestOption children.

When the user starts navigating the menu, it changes the text input and triggers a new set of suggestions (that may not show the user's desired choice).

What behavior did you expect?
Navigating suggestions would not trigger onValueChange or would provide some other mechanism to ensure that the suggestions can be left as-is for the user.

If applicable, provide screenshots:
image

Press down arrow

image

In what environment did you see the issue?

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC] - Any
  • Browser [e.g. Edge, Chrome, Safari, FireFox] - Any
  • Version [e.g. 1.8.0] fast-components-react-base@4.10.0

Any other context
Relevant code - https://github.com/microsoft/fast-dna/blob/master/packages/fast-components-react-base/src/auto-suggest/auto-suggest.tsx#L248

@chrisdholt

This comment has been minimized.

Copy link
Member

commented Jul 22, 2019

@scomea can you take a look at this?

@scomea

This comment has been minimized.

Copy link
Member

commented Jul 23, 2019

@chrisdholt

This comment has been minimized.

Copy link
Member

commented Jul 25, 2019

closed via #2002

@chrisdholt chrisdholt closed this Jul 25, 2019

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