React-autosuggest: Is onSuggestionFocused actually working?

[diegohaz]

I need to know when and which suggestion is focused (not selected yet). I read in old issues that there was a onSuggestionFocused property, but It's not documented and I wasn't able to use it.

[moroshko]

onSuggestionFocused and onSuggestionUnfocused were removed in v3.0.
Can I ask what's your use case for onSuggestionFocused?

[diegohaz]

Hi, @moroshko. I'm using autosuggest to render a search song input.

When a suggestion is focused, I need to toggle a property on it to display a play button (indicating that the song will play when suggestion is selected).

[moroshko]

Can't you use the suggestionFocused style to show/hide the play button? You already have a grey background style for the focused suggestion, so you should be able to do something like this:

.playButton {
  display: none;
}
.react-autosuggest__suggestion--focused .playButton {
  display: inline;
}

[diegohaz]

The .playButton is actually something like .SongListItem__SongControl. It's in another component. I can do that, but I would not feel comfortable trespassing its scope. I would like to just toggle a property in my suggestion component. Do you have another solution?

[diegohaz]

To be more specific, the "display play button" does more than a display: inline. It's something like:

.control {
  transform: scale(0);
  transition: transform 100ms ease-in-out;
}

.control.focused {
  transform: scale(1);
}

It's a specific rule for this component, and if it changes someday, would be nice to just change this component.

[moroshko]

@diegohaz Sorry, I'm not sure I understand the relationship between the Autosuggest component and the "play button". Could you create a Codepen that demonstrates the issue?

[talarari]

i also need to know which suggestion is focused, how would you recommend doing that?
i'm attaching a preview component next to the autosuggest component, and i need to know which suggestion is focused so i can render its preview.

[talarari]

ok I've found a workaround for now, but it feels a little hacky.
i'm using getSuggestionValue or renderSuggestion which is called when a suggestion is focused to render the preview component when the user moves between suggestions with up and down arrows.

any plan to add the onSuggestionFocused callback?

[emersonyu]

Howdy, I also have a use case for this, but also when mouseover causes an item to be "focused". Specifically, I have some meta data sent along with each suggestion object (for example, some extra text to show next to the input box). I want to update that text each time a user focuses on the suggestion. And also remove it when there is nothing focused.

Currently, I can get around this by also doing the getSuggestionValue workaround and adding onMouseEnter in renderSuggestion. And a mouseOut of my container component, but would be awesome if this was built in to react-autosuggest. Let me know if you still need a codepen example.

[moroshko]

@emersonyu I hope to free up some time in the next couple of weeks to implement this. This is something I was planning to add to react-autosuggest for ages.

[emersonyu]

Awesome, thanks @moroshko! I may have some time to take a look in the coming weeks too if you aren't able to get around to it. I also noticed some misc (possible) bugs which I'll file a separate issue for.

[nhducit]

I have use case for this, it's same as this http://istarkov.github.io/google-map-react/map/main/

when hover on a suggestion, I want to draw a marker on map which is lat/lng is contained in hovered item

[nhducit]

I was added onSuggestionFocused callback on a fork. Would you accept if i make a pull request?

[ChrisCinelli]

I have problems with a scrollable dropdown. I have:

  max-height: 200px;
  overflow: scroll;

on theme.suggestionsList. When the user presses arrow down eventually the focused item goes in the hidden part of the overflow and the list does not automatically scroll.

I could fix it with onSuggestionFocused even if it will take a bunch of code to check if the item is visible and scroll it when necessary.

Update: I fixed the scrolling moving the styles on the suggestionsContainer. But I still think that having onSuggestionFocused will be nice