While using autocomplete in modal form any click outside tags input doesn't close autocomplete items

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request/question

Current behavior I’m using tags input and autocomplete inside a modal window. When I start typing any new tag autocomplete shows me variants among items as must. But it doesn’t hide himself if I click anywhere on the modal window outside tag input or even if there is no items in autocomplete to match (an empty small white div block is still shown). Could not figure out can I somehow override trigger events so they can work properly inside modal form or any workaround how I can trigger autocomplete menu to close.

Minimal reproduction of the problem with instructions (if applicable)

Angular 4 bootstrap modal window with this code

<tag-input
            [(ngModel)]="items"
            [maxItems]='5'
            [ngModelOptions]="{standalone: true}"
            [onlyFromAutocomplete]="false"
            #input>
            <ng-template let-item="item" let-index="index">
                <span>{{ item.display || item}}</span>
                <span class="glyphicon glyphicon-remove" (click)="input.removeItem(item, index)"></span>
            </ng-template>

            <tag-input-dropdown [autocompleteItems]="autocomplete">
            </tag-input-dropdown>
        </tag-input>

Same issue for angular 2 modal window

What is the motivation / use case for changing the behavior? (if applicable) Use autocomplete fully on modal windows

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version angular-cli 1.0.3

Angular version: angular 4.1.0

ng2-tag-input version: ngx-chips 1.4.6

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Tested on Chrome and Safari for different versions

[Gbuomprisco]

Either that, or respond to any blur events and call tagInput.dropdown.hide()

[anatoliykolinko]

My solution on that is to clear out input form value,

You are able to bind id to your element: <tag-input … #yourId>

Then just get it like a view child in your component: @ViewChild(‘yourId’) tagInput: TagInputComponent;

And subscribe to modal:

modalComponent.onDismiss.subscribe(() => { this.tagInput.setInputValue(‘’); });

modalComponent.onClose.subscribe(() => { this.tagInput.setInputValue(‘’); });