How to set p-multiselect to be always open

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.

Continue reading...