CODEWITHSUNDEEP
angularprimengmulti-select
Rachel Fishbein
Rachel Fishbein

Reputation: 858

primeng multiselect options box jumps to position 0,0 after pressing key in filter input

I use primeng multiselect control inside datatable.
When I put it inside ng-template pTemplate="editor", I get unexcepted behavior:

First time I open the multiselect, all is ok. But when I write any key inside the filter input, the options list jumps to position 0,0 of the screen.

Html code:

<ng-template *ngIf="itemProperty.widget=='multiSelect'&& itemProperty.name.indexOf('.')<0" let-row="rowData" pTemplate="editor">
                <p-multiSelect
                [displaySelectedLabel]="itemProperty.displaySelectedLabel? 'true':'false'"
                    [defaultLabel]="itemProperty.defaultLabel?'Choose':'...'"
                    optionLabel="Name"
                    [disabled]="itemProperty.editableOnlyInsert&&row.RowState!=3"
                    #con="ngModel"
                    [options]="itemProperty.options"
                    [(ngModel)]="row.Modules"
                    appendTo="body"                        [filter]="itemProperty.options&&itemProperty.options.length>5"
                    (onChange)="editItem(row,con,false,$event,true)" >
                </p-multiSelect>
            </ng-template>

After first time clicking on multiselect:

enter image description here

After writing something inside the filter input:

enter image description here

When I use pTemplate = "body", there is no problem.

Upvotes: 0

Views: 1532

Answers (2)

foxgang
foxgang

Reputation: 97

DataTable is deplicated. You can use with turbotable or you can try this (delete appendTo="body")

<p-multiSelect
            [displaySelectedLabel]="itemProperty.displaySelectedLabel? 'true':'false'"
                [defaultLabel]="itemProperty.defaultLabel?'Choose':'...'"
                optionLabel="Name"
                [disabled]="itemProperty.editableOnlyInsert&&row.RowState!=3"
                #con="ngModel"
                [options]="itemProperty.options"
                [(ngModel)]="row.Modules"
                [filter]="itemProperty.options&&itemProperty.options.length>5"
                (onChange)="editItem(row,con,false,$event,true)" >

Upvotes: 0

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

I resolve that by updating the multiselect.ts file from 

components/multiselect/multiselect.ts

ngAfterViewChecked() {
        if (this.filtered) {
            this.filtered = false;
        }
    }

It working fine now it won't get to the corner of the screen. Although its bad to modified file in the module, I guess they will fix it up in next release.

Upvotes: 0

Related Questions