React 18: getSectionSuggestions is called with undefined after selecting suggestion on mobile device

[OliverJAsh]

Are you reporting a bug?

https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-qi2jdy?file=src%2FApp.js

On a mobile/touch device, select a suggestion.

Observed behaviour: Runtime exception: TypeError: Cannot read properties of undefined (reading 'languages'). It seems that getSectionSuggestions is called after onSuggestionsClearRequested with a value of undefined.

Expected behaviour: No runtime exception

Screen.Recording.2022-10-05.at.10.24.24.mov

Here's another reduced test case using exactly the same code but running with React 17 instead of React 18: https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-ajv2xi?file=src%2FApp.js. This one doesn't have the same problem. The problem only seems to occur when using React 18 and the new createRoot API.

Note also that this problem does not occur when we're not using multiSection: https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-w7yg7r?file=src%2FApp.js

[Magellol]

For anyone looking to quickly workaround this issue, we've changed our implementation of getSectionSuggestions like the following

-declare const getSectionSuggestions: (s: Section) => Array<Suggestion>
+declare const getSectionSuggestions: (s: Section | undefined) => Array<Suggestion>

[pav-w]

For anyone looking to quickly workaround this issue, we've changed our implementation of getSectionSuggestions like the following

-declare const getSectionSuggestions: (s: Section) => Array<Suggestion>
+declare const getSectionSuggestions: (s: Section | undefined) => Array<Suggestion>

Sorry, how do you implement this? Where do you put that line? Thanks

[Magellol]

@pav-w Sorry if this wasn't clear. It looks like under React 18 your getSectionSuggestions callback can now be called with undefined which I believe is a bug from this library. You now need to handle this as well. For us we return an empty array when undefined is passed.

[adriangohjw]

Yup this works!

For anyone looking to quickly workaround this issue, we've changed our implementation of getSectionSuggestions like the following

-declare const getSectionSuggestions: (s: Section) => Array<Suggestion>
+declare const getSectionSuggestions: (s: Section | undefined) => Array<Suggestion>

If you are not using TS, this is the JS-equivalent

const getSectionSuggestions = (section) => (section ? section.suggestions : []);