Unplanned
Last Updated: 30 Jun 2022 12:36 by ADMIN
Michael D
Created on: 15 Jun 2022 07:56
Category: Date/Time Pickers
Type: Bug Report
0
Date/Time Picker button :active style is not applied in Firefox

The different Date/Time Pickers contain of an input field and a button that opens a calendar view in a popup. Usually, the background color of the button changes when it is clicked. In Firefox, nothing happens, because it seems to block the :active pseudo class. This DOJO demonstrates the behavior.

In other, similar input widgets like the NumericTextBox, this problem does not occur, because the .k-selected class is set on the button instead. Still, Firefox blocks the :active pseudo class.

4 comments
ADMIN
Georgi Denchev
Posted on: 30 Jun 2022 12:36

Hi, Michael,

Thank you for the clarification, I can clearly see the problem now.

I've approved the bug report and opened an issue in our public GitHub repository for it.

Additionally, I've updated your Telerik Points as a sign of gratitude for reporting this behavior and providing details on its reproduction.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Michael D
Posted on: 24 Jun 2022 06:00

Hi Georgi!

I am so sorry, I must have changed the DOJO after posting the bug report. But I see, you have already switched to the datePicker yourself.

The difference I expercience occurs while clicking on the button of the datePicker:

Chrome default look:

Chrome hovered look:

Chrome active look:


 

Firefox default look:

Firefox hovered look:

Firefox active look:

 

Note that in Firefox, hovered and active look exactly the same. The problem does not occur when setting the pseudo classes manually via the devTools, only when the button is actually hovered/clicked.

In my opinion, the problem is that Firefox does not apply the pseudo classes correctly, because some event is prevented (see the link in my previous comment).

I hope this clears things up a bit. Sorry for the inconvenience.

ADMIN
Georgi Denchev
Posted on: 22 Jun 2022 07:28

Hi, Michael,

I am having a bit of a trouble understading the exact issue, could you please provide me with a bit more details?

The Dojo example showcases a colorpicker instead of a datepicker. The ColorPicker's button doesn't have any :active styles so you won't see a difference in any browser.

I tested the datepicker in both FireFox and Chrome with the :active pseudo class and these are the results:

Chrome

FireFox

Dojo used

https://dojo.telerik.com/@gdenchev/agutUDEL 

I'll be looking forward to your reply.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michael D
Posted on: 15 Jun 2022 09:16
This probably has something to do with this FF-specific behavior: https://bugzilla.mozilla.org/show_bug.cgi?id=771241