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?

[jennikate]

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.

We've been having the same issue with the defaultValues.
We're now setting the value of the input directly with our own javascript and then updating the classes on the ul element to ensure the hidden class is used.

It's a very hacky workaround but it does at least work.