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?

iPadOS 17.6.1

🧢 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.

[tomsontom]

Using your sandbox i can:

• not reproduce it on iPhone 15 Simulator (showing v17.5 as the version)
• reproduce it on iPad (10th generation) (showing v17.5 as the version)

Bildschirmaufnahme.2024-11-22.um.11.47.51.mp4

[tomsontom]

I could now reproduce it with your sample when running it locally on an iPad with Version iPadOS 17.6.1

IMG_0264.mp4

The following things can be observed:

• outside a dialog the Datepicker works as expected
• inside a dialog click on the date field does not bring up the picker
• clicking on the label associated with a date field does bring up the picker

[ktabors]

Thanks for the additional information. I was able to reproduce it on my physical iPad in Codesandbox one time, but Codesandbox kept crashing. I opened the preview in a new browser tab/window, but the Dialog doesn't open at all. I switched to my locally running example and was able to reproduce it by:

• Opening and closing the native date input.
• Opening the dialog
• Tapping on the native date input in the dialog does not open the popover, it just sets the date.

If you skip the first step and open the dialog and native date input within the Dialog does open.
In the iPad simulator the Codesandbox performs the same as the locally running app for reproduction.
In the iPad simulator running the app locally the problem always happens. In the local app I did include a nave input color picker in the dialog and that always opens correctly in both the simulator and physical iPad.