primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.68k stars 1.01k forks source link

Calendar: focus border and mask issue (material design theme) #7251

Open djapal opened 2 days ago

djapal commented 2 days ago

Describe the bug

According to this codesandbox and using primereact 8.0.0, when focusing a calendar element, broder changes and also mask is shown. Also floating label moves up to indicate focus event. Border changes color on focus but when "showIcon" is used, border doesnt change color (purple e.g. for indigo) Using primereact 10.8.3 nothing happens

Reproducer

https://codesandbox.io/p/sandbox/musing-pateu-gmxvrk?file=%2Fpackage.json%3A12%2C27

System Information

Not sth specific for this

Steps to reproduce the behavior

Just focus on a calendar element

Expected behavior

No response

sja-cslab commented 2 days ago

You should add a reproducer that shows the issue not one that shows an old working example - create a stackblitz with your issue please

djapal commented 2 days ago

You should add a reproducer that shows the issue not one that shows an old working example - create a stackblitz with your issue please

Hi. no need for reproducer. Just go to showcase, select material design theme and just focus on the calendar element.

sja-cslab commented 2 days ago

Material image

Lara image

both seems to work - what exactly is the problem here? I dont see any issue

djapal commented 2 days ago

Example with primereact 8 image Showcase with primereact 10.8.3 image

Ok seems that border is changed although is seems thinner when comparing with border of inputtext on focus event. Still though the floating label doesnt go up, as when focusing other input elements. Also mask not shown when focusing. You can see the mask when trying to delete a selected date

djapal commented 2 days ago

seems that floating label doesnt go up at the position of the border, regardless of the theme, as i just checked.