Input DatePicker and TimeInput required prop not working

[mariansimecek]

What package has an issue

@mantine/dates

Describe the bug

Hi, this code not working as expected

  <DatePicker required />
  <TimeInput required />

In form block it isn't catch empty inputs and doesn't throw any error.

In which browser did the problem occur

Chrome, Firefox

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/objective-albattani-vk6c4m?file=/src/App.js

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

I think problem is with combination readonly and required attributes. When I remove readonly it is working.

[coding-manuel]

readonly and required cannot work together as it's generally assumed that they will already hold some value.

A Janky way to fix it would be to do <DatePicker readonly={false} sx={{ caretColor: "transparent" }} /> but you can have occasional letters in the input which is not the expected behavior.

My proposal for the change would be to

1. Remove the readonly attribute from the DatePickerBase
2. Add an else-if to catch any character inputs and neglect them in the handleKeyDown method.

Attaching what I could achieve by doing the above steps:

https://user-images.githubusercontent.com/53911108/172039249-c6e6e9fb-c31f-41c6-b53f-23a21de277f3.mp4

[rtivital]

It's not really a good idea to remove readonly from the input – it will allow users to use free input when they are not supposed to

[coding-manuel]

Yes, that is why we need to catch any kind of free input and ignore them, which we do in the else if block.

In my implementation, the user is not able to type anything until the allowFreeInput is enabled.

[rtivital]

I've tried to fix the issue, but it seems not to be possible without very nasty hacks. I suppose DatePicker, TimeInput and several other inputs just do not support native browser validation.