'Unable to select year for input="text" and role="spinbutton"

I am using Kendo React and it has a date picker component.

<span class="k-dateinput-wrap">
   <input tabindex="0" type="text" spellcheck="false" autocomplete="off" 
     autocorrect="off" class="k-input" id="tillDate" aria-valuemin="-2209008070000" 
     aria-valuemax="4102338600000" aria-valuetext="08/24/2022" aria-
     valuenow="1661299200000" value="08/24/2022" aria-haspopup="true" role="spinbutton">
</span>

This is the relevant portion of HTMl spit out.

enter image description here

When I try to select text with mouse, I am unable to select anything other than the mont (08)

Once month is selected I can move the selection around using arrow keys. Up and down arrow increment and decrement values as expected.

If I add role="group" to the parent span (which has k-dateinput-wrap on it), it works as expected on firefox. It does not work as expected on chrome at all.

What is the correct fix?

htmlcssreactjskendo-react-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions