p-MultiSelect: Clear Button does not work

[jpgoelz]

Describe the bug

When using [showClear]="true" clicking on the X to clear the selection of the MultiSelect no longer clears the selection. Instead, the dropdown is opened and closed.

This issue is new with 17.3.3 and does not exist in 17.3.2.

While this is off-topic, and we are generally very happy with the product you provide, please try and improve your quality assurance mechanisms. The last few updates have introduced a lot of breaking bugs in the dropdown menus that have rendered parts of our application unusable and resulted in having to invest a lot of expensive time into trying to find these issues. And I am not talking about major or minor updates, but patch updates. It is a bad sign, if the team starts to talk about not updating PrimeNG unless absolutely necessary.

Environment

n/a

Reproducer

No response

Angular version

17.1.0

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20

Browser(s)

Chrome

Steps to reproduce the behavior

1. Set [showClear]="true" on your <p-MultiSelect>
2. Select Items from the Dropdown
3. Click on the X and see that the selection remains while the dropdown is opened and closed

Expected behavior

The selection is cleared instead.

[adri95cadiz]

I've also tested this in p-dropdown and p-calendar components, and both have the same problem; in version 17.3.3 as well as in version 17.3.2, for now I have downgraded to version 17.3.1 which doesn't have this issue.

[jacqueslareau]

Experiencing the issue with p-dropdown

[denny99]

Might be related to #14606. ?

[cetincakiroglu]

Hi @jpgoelz,

Could you please provide a stackblitz example, seems it works here https://stackblitz.com/edit/itiykk?file=src%2Fapp%2Fdemo%2Fmulti-select-basic-demo.html

[cetincakiroglu]

I've also tested this in p-dropdown and p-calendar components, and both have the same problem; in version 17.3.3 as well as in version 17.3.2, for now I have downgraded to version 17.3.1 which doesn't have this issue.

Could you please create separate issues for other components by providing stackblitz examples so we can understand the issue and target them one by one?

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[jacqueslareau]

If you go on the primeng site directly (primeng.org) and click on Get Started, then select the Dropdown component, the first example on the site does not work.

But if you go directly to primeng.org/dropdown , it works.

I'm not sure how to replicate this.

[astranCZ]

This is replicate issue.
The p-dropdown component does not work properly when the p-calendar is on the page.

https://stackblitz.com/edit/github-pmdtzh?file=src%2Fapp%2Fapp.component.html%3AL19,src%2Fapp%2Fapp.component.ts

[denny99]

So then its fixed with #14607

[jpgoelz]

This is replicate issue. The p-dropdown component does not work properly when the p-calendar is on the page.

https://stackblitz.com/edit/github-pmdtzh?file=src%2Fapp%2Fapp.component.html%3AL19,src%2Fapp%2Fapp.component.ts

Thank you for this. I was at a loss, as I could not replicate the issue myself, except for in our application. We do use calendar and dropdown as well.

@cetincakiroglu, I added a calendar to your working StackBlitz and the issue becomes visible for p-multiSelect as well:
https://stackblitz.com/edit/itiykk-x1yhiy?file=src%2Fapp%2Fdemo%2Fmulti-select-basic-demo.html

[jacqueslareau]

Thank you. Is there a workaround we can use until it is fixed?

[denny99]

Overwrite the css in your angular global styles file.

.p-icon-wrapper {
pointer-events: unset (!important depending on your setup)
}

[psarno]

This also impacts <p-password [toggleMask]="true"> if a <p-calendar> is on the page.

You can not click the "eye" icon to mask/show the password.

The CSS global style workaround above does resolve it.

[STotev]

I can confirm the same behaviour for the dropdown. Though, it's hard to replicate it on stackblitz. Somehow it works there.

@denny99 workaround works for me, too.

[cetincakiroglu]

Hi,

This issue is related with #14606 and it was also replicated in dropdown component. The issue caused by possible CSS leak in the calendar component. We've fixed the issue by updating p-icon-wrapper style rule. Probably, it'll fix this issue too. I'm assuming that it's fixed and closing the issue. Please try with the upcoming release and let us know if the issue persists.