Using templates and defaultValue results in an empty option on focus

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.

[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.