Bug: React date input not working with iOS voiceover

[thegrims]

React version:

Steps To Reproduce

1. Add input with input type date like in this codesandbox https://codesandbox.io/p/sandbox/x6ctp5?file=%2Fsrc%2FApp.js
2. Access codesandbox link https://x6ctp5.csb.app/ or similar on browser on an iPhone with voiceover on
3. When the datepicker is focused, calander doesn't become visible, which blocks voiceover users from using this element

Link to code example:

https://codesandbox.io/p/sandbox/x6ctp5?file=%2Fsrc%2FApp.js

The current behavior

• Calendar doesn't show up in datepicker when element is selected in voiceover

The expected behavior

• Calander should show up when selected

[rickhanlonii]

This looked like a webkit bug triggered by having an event listener on a parent element for the "click" event.

This code in vanilla JavaScript will break VoiceOver for date inputs in Safari:

const root = document.getElementById("root");
root.addEventListener("click", (event) => {
  console.log("received delegated click event");
});

<div id="root">
  <input id="date" type="date" value="2017-06-01" name="date" />
</div>

Here's a repro in Vanilla JS: https://8s994v.csb.app/

From this sandbox.

[rickhanlonii]

Bug submitted here: https://bugs.webkit.org/show_bug.cgi?id=294649