Bug: input type=date clears on Firefox when invalid date is typed

[vasa-chi]

If you input incorrect value in date input on Firefox, the whole input clears. I've prepared a sandbox: https://codesandbox.io/s/cold-dawn-ksmgb4 . If you input 0 into any part (day, month, year) of the field, it goes to empty state.

React version: 18.2.0
Firefox: 110.0 macOS

Steps To Reproduce

1. Fill date input with correct value
2. Enter 0 into it
3. The whole field clears

Link to code example: https://codesandbox.io/s/cold-dawn-ksmgb4

The current behavior

The field clears

The expected behavior

The field should behave the same as uncontrolled HTML input behaves (specifically, Firefox fills the date part with zeroes).

[kalp2525]

This is by-default feature of input type=date, when your type=date so it's validate first and then display. So your input is 0 then validator check the given value is true or if false then it will print perfect date either it will print simple dd-mm-yyyy .

[vasa-chi]

It isn't by default, and date inputs don't do that. You can play with it on MDN and see for yourself.

This is how Firefox handles 0 in month:

Input's value in this state is "".

[kalp2525]

This MDN given by you which was working perfect into my Firefox browser. I don't know why this not working in your Firefox browser. Please see the version of your browser and update it.

[vasa-chi]

@kalp2525 What do you get, when you input 0 in month part of the input?

[kalp2525]

I getting this when my input 0 in month

[vasa-chi]

I've checked FF 110.0 on macOS and Windows. Both give me this:

Maybe this behaviour is locale-related? I'm on ru_RU

[kalp2525]

I have FF 110.0 same like you so you check again and solve this issue.

[jbonzohln]

This is happening for me as well. Here is a code sample https://github.com/jbonzohln/react-date-test
I'm using Firefox 123 on macos 14.3.

[jtguignard]

Hi,

you can try this way, using defaultValue

https://codesandbox.io/p/sandbox/competent-morning-jmwvr2?file=%2FApp.js%3A6%2C41

[jbonzohln]

That works only if the date input is bound to a single value like you have there, but if it's bound to a field within an object the issue is there. See https://codesandbox.io/p/sandbox/ecstatic-jerry-78z6dw

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!