html - How to set p-multiselect to be always open - Stack Overflow

admin2025-04-17  3

I am facing with some issue regarding the p-multiselect. Because in the project, we are using on many places this p-multiselect but on mobile device, I need to change something. This is my p-multiselect on mobile view:

p-multiselect without header in p-dialog

I implemented when I open the p-dialog, this p-multiselect is already opened. But my main point is to implement to be body of p-multiselect always open on this page. The problem is when I click on header of this page or somewhere on white space, this body of p-multiselect will be closed. I was researching for some directive in primeNg documentation but I did not found anything. Do you have some idea how to do it? Also, this is the my part of code:

<p-dialog header="Filter" (click)="$event.stopPropagation()"
                                [ngClass]="showDialogFilter ? 'showDialogFilter' : 'hideDialogFilter'"
                                [(visible)]="visible" modal="true" baseZIndex="1000"
                                [style]="{ width: '100vw', height: '100vh', top: '0', left: '0' }"
                                (onShow)="openDropdown()" (onHide)="showDialogFilter = false">
                                <div class="relative">
                                    <div class="over-hidden-header"></div>
                                    <p-multiselect (onFocus)="onFocus()" (onBlur)="onBlur()"
                                        [overlayOptions]="{autoZIndex: false}" (click)="$event.stopPropagation()"
                                        class="border-0" #dropdownRef [options]="dropdownOptions"
                                        [(ngModel)]="selectedOptions" [showToggleAll]="true" [filter]="false"
                                        optionLabel="name" placeholder="" panelStyleClass="custom-dropdown-panel"
                                        styleClass="custom-dropdown" (onChange)="onDropdownChange($event)">
                                        <ng-template let-option pTemplate="item">
                                            <div class="d-flex justify-content-between w-100">
                                                <div>{{ option.name }}</div>
                                                <div>
                                                    <i class="fa-solid fa-circle circle-skill"
                                                        [ngStyle]="{'color': getColor(option?.value)}"></i>
                                                </div>
                                            </div>
                                        </ng-template>
                                    </p-multiselect>
                                </div>
                            </p-dialog>

I tried to find a some directive in primeNg documentation but I am not able to find it. I guess that I need to implement something onFocus or onBlur but I am not sure.

转载请注明原文地址:http://anycun.com/QandA/1744835292a88281.html