How to use ng2-tag-input with autocomplete dropdown for array of objects

Question

The data for showing in the autocomplete dropdown:

users = [{"user_id":0,"name":"name1"},
         {"user_id":1,"name":"name2"},
         {"user_id":2,"name":"name3"}];

The UI template code showing ng2-tag-input

<tag-input [ngModel]="selectedUsers" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="users" [identifyBy]="'user_id'" [displayBy]="'name'">
    </tag-input-dropdown>
</tag-input>

The UI template for Modal Dialog is :-

<div bsModal #largeModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-primary" role="document">
        <div class="modal-content">

            <div class="modal-body">
                <div class="meeting-form m-xl-1">
                    <div class="row">

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="name">Users</label>
                                <tag-input [(ngModel)]="selectedUsers" [onlyFromAutocomplete]="true">
                                    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="users" [identifyBy]="'user_id'" [displayBy]="'name'">
                                    </tag-input-dropdown>
                                </tag-input>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

In above modal dialog ng2-tag-input is not working.

yes, i am trying to use this in a modal dialog. Whenever I click in input box, it does show any dropdown. If I put this in component HTML then it shows dropdown for the first time only. — hiteshgupta9193, Jun 18 '17 at 14:40
Can you please clarify the problem and the result you wan to achieve ? — Abrar, Jun 18 '17 at 15:13
Above code is not working if I try to use this in Modal Dialog. — hiteshgupta9193, Jun 18 '17 at 17:50
@Abrar I have added modal dialog HTML above in question description. — hiteshgupta9193, Jun 18 '17 at 18:00
@hiteshgupta9193, Does any data get loaded in your **Modal Dialog**'s `tag-input` ? — Abrar, Jun 19 '17 at 12:40

score 1 · Answer 1 · answered Aug 29 '17 at 14:23

I ran into this same issue. The root cause of the problem seems to be the z-index.

The ng2-dropdown-menu (from ng2-material-dropdown) is set to use a z-index of 100. This can be seen in ng2-dropdown.bundle.js

Bootstrap modals use a z-index of 1050 by default.

Therefore, the autocomplete popup is likely displaying but is displaying underneath the modal dialog.

I'm not sure that this is the most elegant solution, but I was able to work-around this issue by adding the following to my CSS file:

.ng2-dropdown-menu {
    z-index: 1051 !important;
}

How to use ng2-tag-input with autocomplete dropdown for array of objects

1 Answers1