Reset button on iOS time input does not return correct event value

[PingEleanor1]

React version: React 17.0.2 IOS version: 14+

Bug

For iOS(Safari and Chrom). The reset button function does not work on the time input:

If I change time to 00:31, reset directly, the time jumps back to 00:30, but the computer still shows 00:31. When pressing reset on a time input, the onChange event is not fired.

Link to code example: https://stackblitz.com/edit/react-enuflz?file=src%2FApp.js Pls try on iOS.

[sammy-SC]

Hello @PingEleanor1,

thank you for the report. I was able to repro the issue and verified that there is an "change" event coming from browser when user presses "Reset."

[mmarkelov]

Seems like it's related to https://github.com/facebook/react/issues/8938

[shriphad-rao]

Is this issue still open? I'm interested in working on it and would love to contribute.

[BikramjeetSingh]

Yes, this issue is still open, and it is affecting some of my code right now. React v17.0.2, iPhone XR, iOS 16.6

[BartoszDadok]

@shriphad-rao Have you found any solution?

[alexandremacedo]

Workaround

const dateRef = useRef()

function handleDate(event) {
    const target = event.target;
    setTimeout(() => {
      target.defaultValue = "";
    }, 100);
}

<input ref={dateRef}  onChange={handleDate} value={state}/>```

[nikischin]

Workaround

const dateRef = useRef()

function handleDate(event) {
    const target = event.target;

    setTimeout(() => {
      target.defaultValue = "";
    }, 100);
}

<input ref={dateRef} onChange={handleDate} value={state}/>

What is the ref needed for in this example? It seems like it was set but never used. Kinda like a mix from the examples provided in #8938

Really don't understand why this issue is open for so long already and still not fixed.