Using templates and defaultValue results in an empty option on focus

[ediblecode]

Using the 'templates' option in tandem with 'defaultValue' results in an empty (or undefined) suggestion when you've give focus to the input.

I've created a codepen to show the scenario and detailed repro steps are below.

In this example, the suggestion is 'undefined':

because I'm returning undefined from the suggestion function, but if you return empty string then you still get an 'empty' suggestion:

.

This is somewhat related to #240 (I think), in that my issue is only manifesting itself, because of the behavior from #240.

Repro steps

1. Set the defaultValue property
2. Set the templates.inputValue to a function
3. Set the templates.suggestion to a function
4. Click on the input to give it focus

Expected result

Nothing happens

Actual result

A sugestion of undefined appears

Suggested fix

I think this is because inside autocomplete.js the initial options state doesn't use the isQueryAnOption function, which in turn uses templateInputValue. So line 65 could be:

-options: props.defaultValue ? [props.defaultValue] : [],
+options: this.isQueryAnOption(props.defaultValue, [props.defaultValue]) ? [props.defaultValue] : [],

OR we change the options.map call within the render, to only render options where the result of this.templateSuggestion(option) is not falsey.

I think the second option is better, but would appreciate any comments!

[Nate-Wessel]

I'm having a similar problem. In my case, it seems that the issue is caused by the defaultValue expecting a string, while my template functions expect an arbitrary object. Passing an object with the expected structure as the defaultValue results in Uncaught (in promise) TypeError: O.toLowerCase is not a function. Passing a string results in undefined errors when I try to access properties that don't exist.

[edwardhorsford]

Have also come across this - similarly my template functions expect an object.

My hacky solution is for my template functions to test if the've been given an object - if not, they just render return whatever they were given.

[edwardhorsford]

Have realised my above solution isn't ideal where the template to display is something other than a string.

For our schools search, we return results like this:

Because of this bug, this ends up as:

If I have my suggestion template check if result is a string and just render that, it looks like:

This isn't terrible but is also not showing what it's meant to show. Will see if I can hack around something showing.

It seems there's two issues:

• Autocomplete attempts to render defaultValue as if it's a chosen option - which it isn't. It should either disregard it, or else pass it to the source function as a query to what to do (and thus render).
• This is also a case of Regression: using defaultValue shows invalid option as a valid suggestion and opens menu unnecessarily #495 - it's a bug that anything is displayed when focusing. That's not what was intended when we worked on this component.

[edwardhorsford]

I slightly feel that if the Autocomplete gets null, undefined or false returned from the suggestion template, then it should disregard that option - rather than rendering Undefined as a valid option.

[edwardhorsford]

I have another (hacky) solution - avoid sending defaultValue entirely.

Instead, after the autocomplete is initialised, use your own javascript to set the value of the input directly. When focused, the autocomplete treats this as a search with a query so runs the regular source function and everything works.

[ryantk]

I have another (hacky) solution - avoid sending defaultValue entirely.

Instead, after the autocomplete is initialised, use your own javascript to set the value of the input directly. When focused, the autocomplete treats this as a search with a query so runs the regular source function and everything works.

@edwardhorsford When I do this the autocomplete suggestions list automatically appears on page load (albeit only showing the first option) but I would like it to not appear at all.

Have you got any suggestions to work around this?