angularprimeng

How to disable ,hiding options from dopdown after selection


Am working on angular application with primeng. I need to stop hiding the options of menu dropdown after selecting an option!

<p-menu onchange="onSelected" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="" #menu [popup]="true" 
[model]="items"></p-menu>
        <button type="button" pButton icon="fa fa-fw fa-list" label="Sort" 
(click)="menu.toggle($event)"></button>


  onSortingSelected() {
  event.stopPropagation();
}

How to solve this? I need to click on multiple selection options one at a time without hiding the option list!


Solution

  • this is the PrimaNG code

        itemClick(event, item: MenuItem) {
            if (item.disabled) {
                event.preventDefault();
                return;
            }
    
            if (!item.url) {
                event.preventDefault();
            }
    
            if (item.command) {
                item.command({
                    originalEvent: event,
                    item: item
                });
            }
    
            if (this.popup) {
                this.hide();
            }
        }
    

    Looks like there's no way to change that behaviour.

    One possible solution is to write your component inheriting from the PrimeNG one and override the itemClick implementation

    I never tried but .... there's this article that might help