Calendar: Calendar CSS breaks other Components

[denny99]

Describe the bug

The Calendar CSS breaks all other Components that use icon wrapper and click Events. Like the p-chips Component

Environment

Does not matter

Reproducer

https://stackblitz.com/edit/github-sstt7q?file=src%2Fapp%2Fapp.component.html

Angular version

17.1.0

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20

Browser(s)

No response

Steps to reproduce the behavior

Just enter something into the chips element.

Try to remove the chip with the times icon.

Not working due to the calendar css

Expected behavior

No response

[Basketblo]

+1. In case of p-calendar presented on a screen - all .p-icon-wrapper icons are ignored, for example Clear icon in p-multiselect.

[k0sr]

Indeed, upgrading from 17.3.2 to 17.3.3 introduced, in our case, a bug for this case:
<p-calendar [iconDisplay]="'input'" [showOnFocus]="false" [showIcon]="true"></p-calendar>

With these 3 attributes combined, and .p-icon-wrapper having a pointer-events: none;, the calendar component becomes completely useless, since the calendar is never shown (the focus opening being disabled), you can only manually write the date as a text.

@denny99 Are you sure that even with your fix, the calendar icon, when inside the input component ([iconDisplay]="'input'"), can be opened by clicking on the icon while the component focus opening is disabled?

[denny99]

When clicking the icon inside the input. The click will pass through the icon itself. So you actually click the input and this opens the input on focus.

So yeah. When you disable the open on focus this won't work at all.

I guess the design team has to find another solution for this one. The original bug report that caused all this trouble was this one here #14501

[k0sr]

I guess the design team has to find another solution for this one. The original bug report that caused all this trouble was this one here #14501

Yes, but shouldn't it be simply reverted, until, as you're saying, the design team finds another solution?
If your PR is merged, the calendar will have a new component functioning issue, whereas if #14501 is simply reverted it will go back to only be a "bad cursor on hover" issue (remaining to be fixed).

[denny99]

I'll change the pr later

[denny99]

@k0sr Thanks for pointing out the potential bug with showOnFocus.

The new fix should, at least partially, solve both issues.

[cetincakiroglu]

Hi,

Thanks a lot for reporting the issue and the PR!