facebook
Bug: Chrome. Controlled and *required* input type="date" - onChange not triggered by pressing clear
React version: 18.1 (and prior, also tested on 16.9)
Steps To Reproduce
- Create a controlled component of type date, and set the required attribute.
- Set any date.
- Press 'clear' and confirm nothing happens.
Link to code example: https://jsfiddle.net/q8cb7v3j/
This example includes both a required and non-required input to showcase that the 'clear' button behaves correctly when the required attribute is not passed. Each change triggers an entry in the log.
The current behavior
When trying to press the 'clear' button on a controlled date component with the 'required' attribute, nothing happens.
The expected behavior
Pressing 'clear' should return the state of the component to an empty value attribute.
The issue might be related to https://github.com/facebook/react/issues/8938 and https://github.com/facebook/react/issues/12313, although this happens exclusively with the required atttribute which the quoted issues and related ones don't seem to mention.
This does not seem like a React bug, this is more like a bug with the input element ( or maybe its by design, I am not sure) https://codesandbox.io/s/gracious-visvesvaraya-1d0b3m?file=/index.html:147-155 I tried to reproduce it with just vanilla js and it still does not clear.
I second @kkyusufk and what I believe is that clear field don't have value "reset" inside it and it's preventing it to be reset. As vanila JS itself is not working better issue to be opened with chrome/safari
