iPad: Native date and time-input does not work inside Dialog
- 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
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