feat(typeahead): optionally do not hide the results on blur

[NKjoep]

I couldn't find any issue related to the onblur, so I am creating this.
the current src code:

@HostListener('blur')
public onBlur(): void {
  if (this._container && !this._container.isFocused) {
    this.typeaheadOnBlur.emit(this._container.active);
    this.hide();
  }
}

I would expect a configuration option whether hide or not the results.

[valorkin]

lost focus -> hide results
why not? ( what is your use case? )

[NKjoep]

So the use case is with mobile browsers. If you want to just 'hide' the virtual keyboard with iOS Safari, you have to tap the 'close/end' toggler in the keyboard itself.

That is enough to trigger the blur event from the input and then you lose also the results.

I think can be useful to better control the user interaction. (there are also some other example with desktop, when you have two lists, when you need to compare something static with something dynamic etc)

[cyberdante]

In my case, the typeaheadOnBlur is not being triggered at all. Has someone else had this issue?

.html:

<div class="col-lg-12">
    <label class="control-label">Select an Entity:</label>
    <input tabindex="{{tabIndex}}"
           [(ngModel)]="model"
           [typeahead]="entities"
           [typeaheadOptionField]="'display'"
           typeaheadOptionsLimit="{{maxElementsDisplayed}}"
           typeaheadMinLength="{{minLength}}"
           (typeaheadOnSelect)="typeaheadOnSelect($event)"
           (typeaheadNoResults)="changeTypeaheadNoResults($event)"
           (typeaheadOnBlur)="typeaheadOnBlur($event)"
           class="form-control">
</div>

.ts:

//...
constructor(private _entityEvents: EntityEvent) {
    // ...
}
public typeaheadOnBlur(e: TypeaheadMatch): void {
        let item: Entity = e.item || e;
        this._entityEvents.onEntityBlurEvent.emit(item);
}

[karthikv-26]

@cyberdante typeaheadOnBlur will be triggered only if you have matching results. If no matching results typeaheadNoResults will be triggered. Hope this helps.

[cyberdante]

@valorkin @karthikv-26 when you have already selected a value from the matching result, the matching result list is closed and the focus is on the input where that value is displayed, I would expect that the typeaheadOnBlur is triggered (as the input is part of the component) if I tab out or click outside of the component.

[NKjoep]

Hello :) Why prio low? I think impacts heavily the UX.

This hide on blur feature affects mobile devices because of the onscreen keyboard: when the results list is longer than the screen, users usually immediately close the onscreen keyboard and then the results are gone.

I really hope this feature will be out soon. Also at the end is just a kill-switch for the internal onblur listener.

[IlyaSurmay]

@NKjoep you're right, this is easy to fix. For now we just have more important stuff to do (compatibility, performance etc). You can create PR with this enhancement and we'll probably merge it and include this feature in the next release.

[valorkin]

@NKjoep bugs and perf issues are hight prio at the moment
enchantments and new features are lower prio
cuz eager to release v2 asap

[1-0-1]

Right now there is no way to close the dropdown without selecting on option. Clicking outside calls typeaheadOnBlur but then the dropdown doesn't close.