Skip to content

Display initial options in dropdown for the AsyncTypeahead component #499

@tsjohns9

Description

@tsjohns9

Is your feature request related to a problem? Please describe.
When using the AsyncTypeahead component I would like to see an initial set of options before I begin to search. The functionality should be the same as the Typeahead component. When I focus the input on the Typeahead component I see the initial set of data that was passed to the component before I begin a search.

The problem here is that even though I provide a default list to the AsyncTypeahead component I do not see the dropdown list of these options before I begin searching.

Describe the solution you'd like
The solution to this problem would be to make the dropdown list appear for the AsyncTypeahead component if there is a default list provided before searching begins.

How is this solution useful to others?
This solution is useful to others because it will allow the AsyncTypeahead component to behave more like the Typeahead component when displaying the initial list, and it will reduce user confusion about how the AsyncTypeahead component is meant to work.

Describe alternatives you've considered
So far I have mostly looked through the code base to see if there was a way to make this list appear on focus, but it does not appear like that is possible as a consumer of the component.

Additional context
Here is a code sandbox to show how even though a list of options is provided to the AsyncTypeahead component from componentDidMount there is no initial list displayed when focusing the input. https://codesandbox.io/s/winter-water-upgux

From the sample on the site, here is the default behavior when focusing the input for the Typeahead component
typeahead

From the comments in the codebase about the options prop that we use to supply the list to the component, it appears that this should supply the initial default options. This is from the asyncContainer.js component:
Screen Shot 2019-10-24 at 2 16 34 PM

This functionality should extend to the AsyncTypeahead component if there is an initial list, and when the input first focuses.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions