React 18: `getSectionSuggestions` is called with `undefined` after selecting suggestion on mobile device
OliverJAsh opened this issue · comments
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
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>
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
@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.
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 : []);