Material-ui: TextField autoFocus in iOS working not properly

[hendriku]

I let a fullscreen dialog appear in my web application and have a TextField being automatically focused. The field is kind of focused, but the blinking | is not displayed.

If you tab on the same TextField again, it'll blink one line under the text field.

Again on the same: TextField is unfocused.

Again on the same, the correct TextField is finally focused with |.

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

This is my dialog content:

<DialogContent style={{ textAlign: 'center' }}>
              <DialogTitle>
                Enter your lorem link
              </DialogTitle>
              <DialogContentText>
                Lorem ipsum.
              </DialogContentText>
              <TextField
                required
                autoFocus
                inputRef={el => this.TitleInput = el}
                margin="normal"
                label="Enter your course title"
                type="text"
                style={{ width: '60%', minWidth: '250px' }}
                inputProps={{ maxLength: 10 }}
              />
              <TextField
                required
                inputRef={el => this.LinkInput = el}
                margin="normal"
                label="Enter your link"
                type="text"
                style={{ width: '60%', minWidth: '250px' }}
              />
</DialogContent>

Environment

This bug only happens on iOS devices.

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.19 |
| React | 16.0.0 |
| browser | iOS Safari |
| etc | iPhone 7, iPad Pro 9" |

[bndnio]

I too am experiencing this with text fields when they are in a modal.

Tech | Version
-- | --
Material-UI | 0.19.4
React | 15.5.4
browser | iOS (10 & 11) Safari
etc | iPhone 7, iPhone 8

[oliviertassinari]

Does it work with a raw <input /> component?

[hendriku]

@oliviertassinari I just replaced the TextFields with:

  <Input
    autoFocus
    ref={el => this.TitleInput = el}
  />
  <Input
    ref={el => this.LinkInput = el}
  />

and the result is different, but still not correct. When the dialog opens, the input with autoFocus property is underlined in red but no blinking | appears and no keyboard is shown.

If I touch the "focused" input element once again, the element has completely correct focus and keyboard shows up.

[oliviertassinari]

I meant the raw <input /> component. I'm wondering if it's not React related.

[hendriku]

@oliviertassinari Ok, I tested it. The raw <input /> component declared with autoFocus property focuses correct on Chrome but does simply not automatically focus on iOS. After a touch the input is focused without the bugs before.

[oliviertassinari]

Hum, here is what I have with a native input. Something is wrong with the Dialog/input autoFocus integration on iOS.

[oliviertassinari]

Alright, it's an iOS 11 issue. Reading this blog post lead me to https://bugs.webkit.org/show_bug.cgi?id=176896.

[mlake]

Super..so for the TLDR; it's an iOS bug introduced in iOS 11.0 that is reportedly fixed in iOS 11.3 beta as of Feb 2018. Actually...that's not so super. Thanks for making me re-architect my app Apple.

[ee92]

So is there a solution to this? Some kind of work around to make the inputs usable on iOS devices <11.3 ?

[Piioo]

Tested on iOS 12 and it is still not working

[welljsjs]

Has anything changed since then?

I' currently experiencing the same issue with a Mui TextField.

[oliviertassinari]

@welljsjs I encourage you to try with a raw <input> element. You should be able to notice the same problem.

[welljsjs]

Ok.

I just stumbled across this comment and I feel like it was working on earlier versions (e.g. earlier than iOS 12.2).

I'm not exactly sure though because I haven't touched the project I'm currently working on for a while.