Cannot advance the cursor through input fields on iOS

[ryan]

On iOS devices, I can’t advance the cursor through text that lies beyond the bounds of the Title input. The cursor stops advancing through text once it hits the left or right border of the input field. This causes me to abandon my mobile session and pick up editing when I get to a laptop. Mobile abandonment of edit flow is not good.

This happens on all my iOS devices. Android looks good.

​https://make.wordpress.org/flow/2015/05/26/advancing-the-cursor-through-input-fields-on-ios/

[designsimply]

Tested and confirmed with the following steps to reproduce:

1. Go to Posts > Add New on any iOS device
2. Type a title long enough to fill the title input field and then some
3. Try to move the cursor to the beginning of the title

Result: I'm stuck and can't advance the cursor beyond the last text I typed in the field. ​52s

Tested with WP 4.3-alpha-32280-src on Safari iOS 8.3 with an iPhone 6.

[designsimply]

Tested a few other input fields, and the same problem happened for all of them:

1. Captions when creating a gallery
2. The "Name" field on the Posts > Category page
3. The post slug when editing a draft
4. "Site Title" field in Settings > General
5. etc.

It appears all the input fields have the same problem.

[iseulde]

Not sure if there's anything we can do about an iOS bug.

[ryan]

​https://stackoverflow.com/questions/28544163/ios-safari-8-input-overflow-scroll

[obenland]

Set to be fixed in a future release, unless we find a cure before 4.3 ships.

[azaozz]

As far as I see the only way to work around that super annoying iOS bug is to replace <input type="text"...> with <textarea>. Then these fields will be vertically scrollable and we could also set the height from JS when the string is too long to fit.

That might work in a few places like the post title, unfortunately no way to do it everywhere.

[obenland]

That sounds like a really bad hack.

[azaozz]

Yeah, if we do it only for iOS it will be pretty hacky.

On the other hand a textarea for the post title works pretty well in all browsers and viewport sizes. It is still a bit annoying to have to select the text and drag to reveal the rest of it when the title is too long to fit. If we have a textarea there it will reveal the whole text (of course scrollbars should be off in all cases).

[johnbillion]

This sounds like a pretty fundamental bug on iOS. Is there anything WordPress-specific about it? Are there any text inputs that are not affected? If so, what is it about them that means they are not affected? ​As Ryan mused, Is this really broken across the entire mobile web on iOS 8?

Swapping out text inputs for textareas to get around this bug is unacceptable.

As much as I hate to say it, this looks like a wontfix unless someone comes up with a better fix.

[iseulde]

iOS 9.2 and this is still an issue...

[ryan]

Coming up over in Calypso too.

​https://github.com/Automattic/wp-calypso/issues/1679

I mused out loud about this last year.

​https://twitter.com/rboren/status/613773854373064704

[valentinbora]

For my feeling, this is no longer an issue on iOS 13.3.1, tested on both Chrome and Safari. Please give it a try.

[SergeyBiryukov]

Closing per comment:25, feel free to reopen if there's still an issue.