Option showHintOnFocus: "all" doesn't work anymore after selecting an item

[aureole82]

Given the following snippet:

var source = ["Coffee", "Tea", "Cereales", "Toast", "Butter", "Eggs", "Beacon", "Fruits"];
var $input = $("#breakfast");
$input.typeahead({
	minLength: 0,
  showHintOnFocus: "all",
  source: source
});

1. Click into #breakfast input (all hints will be display).
2. Select one hint (#breakfast input got focus again).
3. Click somewhere else and click into #breakfast input again.
   No hints are displayed!

Try: https://jsfiddle.net/2dw5e6aj/

I assume the blur function doesn't set this.focused = false; properly. So the focus function won't fire this.lookup("");?!

[thorsten]

I can confirm the issue.

[joshward]

I dug into a workaround for this issue for our project.

As OP suggested the issue is that focus only fires this.lookup("") when !this.focused.

Bootstrap-3-Typeahead/bootstrap3-typeahead.js

Lines 609 to 618 in fc2d5dc

	if (!this.focused) {
	this.focused = true;
	this.keyPressed = false;
	if (this.options.showHintOnFocus && this.skipShowHintOnFocus !== true) {
	if (this.options.showHintOnFocus === 'all') {
	this.lookup('');
	} else {
	this.lookup();
	}
	}

Selecting doesn't automatically blur the input and even on blur the handler fails to set this.focused because it's gated behind this.shown which is false because the suggestions are already closed.

Bootstrap-3-Typeahead/bootstrap3-typeahead.js

Lines 626 to 632 in fc2d5dc

	if (!this.mousedover && !this.mouseddown && this.shown) {
	if (this.selectOnBlur) {
	this.select();
	}
	this.hide();
	this.focused = false;
	this.keyPressed = false;

my workaround was to manually force a blur and set the this.focused to false e.g.

afterSelect: value => {
  // what ever other handling code

  setTimeout(() => {
    $(input).blur();
    $(input).data('typeahead').focused = false;
  };
}