AutocompleteInput throws an error if resource[optionText] isn't a string

[developerium]

Hi guys

I noticed in here, if the result field from api response is null, (usually when first input is put in page), then suggestionLabel.toString() will throw an error saying null doesn't have method toString.

What do you think about this? Should we put a default filter to avoid being null, or convert to string differently?

[djhi]

if the result field from api response is null, (usually when first input is put in page)

I don't understand this.

Should we put a default filter to avoid being null

Why are you referring the filter ?

[developerium]

This is the code I'm using to get around the error

<ReferenceInput
    {...props}
    source={source}
    reference="User"
    filterToQuery={searchText => ({ name: searchText, is_employee: 1 })}
  >
    <AutocompleteInput optionText={item => (item.name ? item.name : '')} />
  </ReferenceInput>

In the autocomplete, for the optionText prop, if I just gave optionText="name" , and api gave a response, in which even one row has name=null , this line will throw an error.

Because it is trying to run .toString on null .

[Kmaschta]

We surely can improve this error message, but we'll not be able to do much.
If the data we need to display the item isn't available, we can at best remove it from the result list.

[developerium]

Yes I agree, some missing data should not crash the app.
What is the best way to handle this? Maybe I can contribute if you put me in the right direction

[fzaninotto]

I think the fix is as easy as adding an empty string ('') as third parameter to the get() call line 183 of AutocompleteInput:

react-admin/packages/ra-ui-materialui/src/input/AutocompleteInput.js

Lines 176 to 189 in af8f2da

	getSuggestionText = suggestion => {
	if (!suggestion) return '';
	const { optionText, translate, translateChoice } = this.props;
	const suggestionLabel =
	typeof optionText === 'function'
	? optionText(suggestion)
	: get(suggestion, optionText);
	// We explicitly call toString here because AutoSuggest expect a string
	return translateChoice
	? translate(suggestionLabel, { _: suggestionLabel }).toString()
	: suggestionLabel.toString();
	};

Lodash.get() uses the third parameter as a default value.

[Kmaschta]

IMO it's a better idea to filter the erroneous results and display an error in the console.

@developerium It's up to you! PR are welcome :)

[developerium]

@fzaninotto I agree, will you put this in your next release or should I make a pull request? since it's a minor change?

[fzaninotto]

you can make a pull request against master for that.