Detect suggestions visible

[jeffkreska]

Are you reporting a bug?

No

Are you making a feature request?

Yes

• Please describe your use case from user journey point of view, e.g.:

  On mobile devices I show the suggest component in a modal screen and I need a way to disable scroll on the body when the suggestions are showing.

• If you have ideas how to extend the Autosuggest API to support your new feature, please share! Exposing the state value isCollapsed

• If you know any examples online that already implement such functionality, please share a link.

[orenh1]

I would also like this feature, but my use-case is different:

I use the AutoSuggest component in a dialog box. I would like the Enter key to act as if the default button in the dialog box was clicked.

However, the Enter key should behave differently depending on whether the Suggestions are visible or not:

1. When they're visible: Enter should select the currently highlighted item.
2. When they're invisible: Enter should act like the dialog box's button has been clicked.

This leads to a great user flow:

1. Open the dialog box
2. Type 2-3 characters
3. Thanks to "highlightFirstSuggestion", the desired result is already highlighted
4. Press 'Enter' once to select the first suggestion. The input field fills in with the full text of the first suggestion, and the suggestions list disappears.
5. Press 'Enter' a second time to submit the dialog box.

To be clear, I don't need the component to tell me when Enter was clicked. I can get that information using a keypress handler. I only need to know whether the Suggestions list is visible.

[grantmr]

I also have the use case mentioned by @orenh1 I'm finding that after the first Enter press, the suggestions disappear and highlightFirstSuggestion is selecting the first suggestion in the list and not the one the user selected, so the second Enter press actually submits that newer, hidden selection. Haven't as such found a way to prevent this, but doing highlightFirstSuggestion only when the suggestions are visible would prevent this.

[VilleKylmamaa]

To help you detect whether suggestions are visible, you can access Autosuggest state's isCollapsed and isFocused by giving it ref:

<Autosuggest
    ...
    ref={this.autosuggestRef}
/>

And then calling:

this.autosuggestRef.current.state.isCollapsed or this.autosuggestRef.current.state.isFocused for the respective state variables.