Unwanted behaviour when using $('.typeahead').typeahead('val', myVal);

[8enSmith]

Whilst answering a StackOverflow question I found what I deem to be undesirable behaviour with the "$('.typeahead').typeahead('val', myVal);" function.

When this function is called it causes "myVal" to be correctly inserted, however it causes the suggestion box to also appear. I think users will expect this function to just populate the typeahead control (i.e. just like a call to $('.typeahead').val(myVal);)).

See this jsFiddle and uncomment the call to typeahead('val', ...) to recreate the issue.

Is this indeed an issue or is it expected behaviour?

[jharding]

I agree that this isn't ideal. I think the correct behavior should be dependent on whether the dropdown menu is open or closed. If it is closed, it should just update the input control. If it is opened, it should update the input control and request/render the corresponding suggestions. Does that sound reasonable?

[8enSmith]

Yes, what you have proposed above sounds ideal.

[jharding]

Linking to #402 as it's a similar issue.

[koraktor]

I found a workaround for this problem:

var typeaheadInput= $('.typeahead').data('ttTypeahead').input;
typeaheadInput.setQuery(myVal);
typeaheadInput.resetInputValue();

[jbarata]

Hi,

another workaround that seems to work is to use jquery val
$('.typeahead').val('the value')

although the docs advise otherwise (https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#api)

@jharding what's exactly the problem with this approach?

Thanks.

[jharding]

The typeahead jQuery plugin cannot detect when you manually set the value of the input, so there's a chance some internal state can get out of sync when you do this. I should actually verify this though as quite a bit has changed since I initially recommended that.

[gpbl]

Hello – I can confirm the state gets out of sync when using $('.typeahead').val('the value').
@koraktor's workaround worked for me (thanks!)

[yanickrochon]

I am unsure how this behavior was resolved. I just installed this component and used .typeahead('val', newValue); to manually set the field's value and the suggestion menu opens.

Right now, I resolve this using

el.typeahead('val', newValue).one('typeahead:open', function () {
  el.typeahead('close');
});

[yanickrochon]

Also, even if the suggestion list is closed, I find that setting some items cause the autocomplete to show a hint when it's not supposed to.

For example :

el.typeahead('val', 'foo');

Will set the correct value "foo" inside my field (where my datasource display is set to return item.name), but if I have a remote item like { name: 'foobar' } then I'll see "foobar" in my field as "suggestion" even though the actual value properly set is "foo".

How do I set a value without triggering a search, suggesitons, and autocomplete?

[yanickrochon]

This should be easy to solve if I could pass silent to the setVal function

el.typeahead('val', 'foo', true);

[yanickrochon]

Well, instead of using val, I'm using this and it works as expected.

el.data('ttTypeahead').input.setQuery('foo', true);

[danielsedlacek]

Also the documentation could be less ambiguous, it is not clear it the typeahead ("val",val) will only set the value or trigger the search too.