Prevent the multi-select dropdown from closing on the deselect option

Question

I have a primeng multiselect dropdown as:

<p-multiSelect
  [options]="stateList.items || []"
  [(ngModel)]="selectedStates"
  [ngModelOptions]="{ standalone: true }"
  optionLabel="name"
  optionValue="id"
  display="chip"
  (click)="onMultiSelectClick($event)"
  (mousedown)="onMultiSelectMouseDown($event)"
  (ngModelChange)="onMultiSelectChange($event)"
  placeholder="test">
</p-multiSelect>

It works well; I can open it and select the "select all" checkbox or select one by one; the problem is when I "unselect," sometimes it closes the dropdown automatically, and sometimes not... it's just weird behavior

As you can see, I tried multiple events to prevent it from closing:

onMultiSelectClick(event: Event) {
    this.isDropdownOpen = !this.isDropdownOpen;
  }

  onMultiSelectMouseDown(event: Event) {
    if (this.isDropdownOpen) {
      event.stopPropagation();
    }
  }

  onMultiSelectChange(event: any) {
    this.selectedStates = event;
    this.isDropdownOpen = false;
  }

  onItemDeSelect(event: Event) {
    event.stopPropagation();
  }

But none worked; it just keeps closing when I want to unselect (not always). Does anyone know how I can prevent it from closing?

Answer 1

One workaround for this is to use OnHide.

<p-multiSelect
  [options]="stateList.items || []"
  [(ngModel)]="selectedStates"
  [ngModelOptions]="{ standalone: true }"
  optionLabel="name"
  optionValue="id"
  display="chip"
  (onHide)="onMultiSelectHide()"
  placeholder="test">
</p-multiSelect>

And the component.ts file changes will be like this. Declare one variable to handle it. And the function for it.

isDropdownOpen: boolean = false;

onMultiSelectHide() {
  // Check if there are selected states
  if (this.selectedStates && this.selectedStates.length > 0) {
    // If there are selected states, keep the dropdown open
    this.isDropdownOpen = true;
  } else {
    // If no states are selected, close the dropdown
    this.isDropdownOpen = false;
  }
}

Try this method and see if it fits your requirement. Do let me know.

Answer 2

You can use the onPanelHide event to check whether the dropdown should be closed or not. Here's an example of how you can achieve this:

<p-multiSelect
  [options]="stateList.items || []"
  [(ngModel)]="selectedStates"
  [ngModelOptions]="{ standalone: true }"
  optionLabel="name"
  optionValue="id"
  display="chip"
  (onPanelHide)="onMultiSelectPanelHide()"
  placeholder="test">
</p-multiSelect>

In the component->

isDropdownOpen = false;

onMultiSelectPanelHide() {
  // determine whether the dropdown should remain open
  if (this.isDropdownOpen) {
    // Reopen the dropdown 
    setTimeout(() => {
      this.isDropdownOpen = true;
    });
  }
}

onMultiSelectClick(event: Event) {
  this.isDropdownOpen = !this.isDropdownOpen;
}

onMultiSelectMouseDown(event: Event) {
  if (this.isDropdownOpen) {
    event.stopPropagation();
  }
}

onMultiSelectChange(event: any) {
  this.selectedStates = event;
  // Close the dropdown if needed
  this.isDropdownOpen = false;
}

onItemDeSelect(event: Event) {
  event.stopPropagation();
  // Update this logic for deselection
}

So modify onMultiSelectPanelHide based on your requirement.

Let me know if that works.