adobe / adobe/react-spectrum

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

Open
#7,397 4 comments 1 reaction 0 assignees View on GitHub
FocusScope needs investigation Overlays
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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

```jsx
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 (


Sample date



Open Dialog

Native Date
Failing native date


Sample date




Close
Apply




);
}
```

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_

Contributor guide

Open the contributing guide

Research direction

Reproduce the provided JSX example on Safari on iPadOS, comparing the native date input outside and inside Dialog. Start by reading the DialogTrigger and Dialog entry points and tracing how clicks and focus are handled in the modal. Done means clicking the input inside the dialog opens the native date or time selector as it does outside.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.