Focus out after value is selected.

[dweep119]

Describe the bug
When User search and select the option then Focus is out from the ng-select component.

To Reproduce
Steps to reproduce the behavior (if example is not provided):

1. Go to 'ng-select component and search something you get some option regarding it.'
2. Click OR select the option
3. And after the selection the value Cursor focus out from the component.

Expected behavior
After the select the value focus should be out from it.

Screenshots

[varnastadeus]

Expected behavior
After the select the value focus should be out from it.

Can you elaborate on this?

[dweep119]

@varnastadeus Please consider this example,
https://stackblitz.com/edit/ng-select-zw5cjx

Follow the steps,

1. Search in Input Box.
2. Select the Option based on the search result.

Then after selecting the Option the Focus is still there.
If there is multiple select then focus should be there it is correct.
But if there is single selection then, after the selection focus should be out OR Blur there.

[varnastadeus]

use this

<ng-selelect #select (change)="select.blur()">

[dweep119]

@varnastadeus, it gives me following error,

ERROR TypeError: jit_nodeValue_8(...).blur is not a function at Object.eval [as handleEvent] (ng:///ThemeModule/HeaderComponent.ngfactory.js:37) at handleEvent (vendor.js:82726) at callWithDebugContext (vendor.js:83796) at Object.debugHandleEvent [as handleEvent] (vendor.js:83523) at dispatchEvent (vendor.js:80175) at vendor.js:81665 at SafeSubscriber.schedulerFn [as _next] (vendor.js:73146) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendor.js:181477) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendor.js:181415) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (vendor.js:181350)

Here is code ,

<ng-select #searchBar (change)="searchBar.blur()"
    class="showSearchBarClass fadeInRight"
    [items]="searchItems"
    placeholder="Search..."
    bindLabel="value"
    bindValue="id"
    [searchable]="true"
    [(ngModel)]="selectedSearchText"
    (clear)="onClear()"
    (focus)="onFocus($event)"
    (keyup)="onKeyUP($event)"
    (change)="onSearchBarChange($event)">

    <ng-template ng-option-tmp let-item="item">
          {{ item.value }} <b>{{ item.label }}</b>
    </ng-template>
</ng-select>

version of ng-select is "@ng-select/ng-select": "^3.0.0",

[varnastadeus]

create a reproducible example, I don't get any errors

[dweep119]

which version you of @angular you use?

[varnastadeus]

latest, you should use v8 with ng-select v3

[dweep119]

I am using v7 so, Is there any possibility to work?

[varnastadeus]

I think the best solution is to move to angular v8

[dweep119]

I can not move easily because there is so many dependencies, so please help me.

[dweep119]

Hey @varnastadeus, Is there any option?

[varnastadeus]

use document.querySelector('.ng-input input').blur()

[dweep119]

ok it works. Thanks.

[RNutley]

If anyone comes back to this,

@ViewChild() selectInput: NgSelectComponent;

this.selectInput.searchInput.nativeElement.blur();