CODEWITHSUNDEEP
angularng2-tag-input
hiteshgupta9193
hiteshgupta9193

Reputation: 1

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

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.

Upvotes: 0

Views: 6217

Answers (1)

Garrett Lund
Garrett Lund

Reputation: 11

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;
}

Upvotes: 1

Related Questions