[Dialog] With TextField autoFocus on iOS / mobile , keyboard overlap issue
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
When opening a Dialog that contains a TextField with autoFocus, the Dialog won't be vertically centered.
Expected Behavior 🤔
Should behave the same as manually focusing the TextField after the Dialog opened.
Steps to Reproduce 🕹
Here's a Stackblitz example: https://codesandbox.io/s/quiet-rgb-j784y?file=/src/Demo.js
Steps:
- Just click "Open" on your mobile device (I only tested iPhone / iOS)
Context 🔦
I'm trying to create a simple FormDialog that contains a single input which should be automatically focused and centered.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v5.0.0-alpha.12 |
| React | 17.0.0-rc.3 (also tried version 16.x) |
| Browser | Safari / iOS 14.0.1 |
| TypeScript | 4.0.3 |
| etc. |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue from the linked Stackblitz example on an iPhone running Safari, opening the Dialog with a TextField using autoFocus. Compare its positioning with manually focusing the field after opening. Done means the Dialog remains vertically centered and behaves consistently in both focus cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100