CODEWITHSUNDEEP
angulartypescriptprimeng
Shashank S Chandel
Shashank S Chandel

Reputation: 315

Disable dropdown close of multiselect on click of a field inside multiselect dropdown in PrimeNG

I am working on a requirement in which I am using PrimeNG multiselect. This multiselect has checkboxes followed by some text and logo. On click of logo I am displaying some data in popup. On click of the ok button of popup the background multiselect closes, where in I need to disable closing of popup on click of logo. Heere is the stackblitz example for reference: Stackblitz Demo click here.

Step 1: Open mutiselect and click on logo

Step 1: open mutiselect and click on logo

Step 2: Click ok of popup

enter image description here

Step 3: Multiselect Dropdwon closes

enter image description here

Upvotes: 3

Views: 4973

Answers (2)

TODO
TODO

Reputation: 35

I found a much shorter solution that worked in my application. I had an issue where clicking the checkbox would allow the multi-select to disappear/close. The multi-select should stay open until the user clicks outside or presses the drop-down arrow.

HTML:

    <p-multiSelect #multiInput
      styleClass="pMultiSelectMaxWidth"
      (onChange)="
      keepMultiSelectOpen()"
    ></p-multiSelect>

TS:

  keepMultiSelectOpen() {
    this.multiInput.show();
    event.stopPropagation();
  }

Upvotes: 2

Arun
Arun

Reputation: 508

Adding StackBlitz Solution.

Achieved this using onPanelHide eventEmitter which calls checkState there I am keeping panel opened with
this.multiInput.show();
If popup is opened.

Upvotes: 4

Related Questions