React-autosuggest: v7.1.0 doesn't focus suggestions on hover

[sunkaflek]

Hi,

I've just upgraded from 7.0.1 to 7.1.0. It appears 7.1.0. does not focus options on mouse hover, see gifs below:

7.1.0.:

7.0.1:

Do I need to update some code on my side or is this a bug in the new version?

Thanks

[moroshko]

Weird... I can't reproduce the issue on my side.
Could you try to create a minimal Codepen please that demonstrates the issue?

[sunkaflek]

I really struggled to create the codepen. Although I believe I found a solution - adding a simple style

.react-autosuggest__suggestion:hover { background-color: #ddd; }

does seem to do the trick (don't know how that is connected to 7.1.0..)

[briice]

Hi, I have the same issue when upgrading from 7.0.1 to 7.0.2. Upgrading to 7.1.0 doesn't help.
It looks like it's related to the upgrade of react-redux from 4.4.5 to 5.0.1 I think. If I manually downgrade react-redux to 4.4.5, even with 7.0.2, and then it works fine.

I couldn't reproduce it in a codepen though, I can't figure out why. Any thoughts?

[briice]

In the redux dispatch function, the UPDATE_FOCUSED_SUGGESTION seems fine, but the react component is not updated with the new props.

[evan-wheeler]

I think this issue is caused by recent optimizations in react-redux. If an ancestor of the autosuggest is wrapped with a Provider, changes to autosuggest's embedded redux store are getting suppressed since the props into the connected component haven't actually changed and don't result in a UI update. The reason the rest of the actions work with autosuggest is that the callback props onChange, onSuggestionsFetchRequested, etc. are forwarded to the outer redux store, which does result in a UI update.

If onSuggestionFocused callbacks were still provided, it would be possible to dispatch those to the outer store, resulting in a prop change which would update the UI, but that is a lot of boilerplate that seems unnecessary. I'm not convinced that embedded a connected redux stores in a library is a good idea.

However, one simple way to get around this is to just wrap Autosuggest with an empty connect call:

const FixedAutosuggest = connect()( Autosuggest );  // <------- Wrap autosuggest with connect.

const FooComponent = (props) => 
    <div>
        <FixedAutosuggest ...autosuggestProps />
    </div>;
...

This wrapped connect injects dispatch but doesn't listen to the store, so I think it simply allows the inner store's updates to result in UI updates. This seems to completely fix the problem for me.

[moroshko]

redux and react-redux dependencies were removed in v8.0.0.

Could you please upgrade and verify that the issue is gone?

[evan-wheeler]

Yes, it is fixed. Thank you!