iOS/iPad: Native date and time-input does not work inside Dialog

[tomsontom]

Provide a general summary of the issue here

using native date / time input fields (eg ) do not work when used inside a . If one clicks inside the field the Calendar-Popup is not opened. On the other hand if you click on the associated label it opens

🤔 Expected Behavior?

Clicking inside the control opens the native date or time selector

😯 Current Behavior

Native date and time selector is only opened if you click on the associated label element

💁 Possible Solution

No response

🔦 Context

Our users requested to use the native input variants for date and time (instead of the ones provided by react-spectrum) but those fail miserably when used on iOS/iPadOS

🖥️ Steps to Reproduce

import { Provider, defaultTheme, Button } from "@adobe/react-spectrum";
import { DialogTrigger } from "@adobe/react-spectrum";
import { Heading } from "@adobe/react-spectrum";
import { Header } from "@adobe/react-spectrum";
import { Dialog } from "@adobe/react-spectrum";
import { Content } from "@adobe/react-spectrum";
import { ButtonGroup } from "@adobe/react-spectrum";

export default function App() {
  return (
    <Provider theme={defaultTheme} height="100%">
      <label>
        Sample date
        <input type="date" />
      </label>
      <DialogTrigger type="modal">
        <Button variant={"primary"}>Open Dialog</Button>
        <Dialog>
          <Heading>Native Date</Heading>
          <Header>Failing native date</Header>
          <Content>
            <label>
              Sample date
              <input type="date" />
            </label>
          </Content>
          <ButtonGroup>
            <Button variant="secondary">Close</Button>
            <Button variant="cta">Apply</Button>
          </ButtonGroup>
        </Dialog>
      </DialogTrigger>
    </Provider>
  );
}

1. Run the above sample and open it with an iPhone/iPad or the Similator
2. Click on the date-input => the date selection control is opened
3. Click on "Open Dialog"
4. Click on the date-input => nothing happens

One can make the date selection control to appear if you click on the label "Sample date" instead of clicking into the control

Version

latest sources checked out from github

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

iOS 18.01

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[ktabors]

I couldn't reproduce this error using a phone running iOS v17.6.1. I tried a simulator using v18.1 and v18.0 and couldn't reproduce this there. I'm checking to see if someone has a phone running iOS v18.01.

I used this Codesandbox as a reproduction of the issue. The preview was crashing on my phone, so I downloaded the codesandbox and ran it locally to test.