Tapping below Bootstrap inputs can focus them in Mobile Safari

[asafbrukarz]

This one has had me puzzled for a while and I've been trying to find a more specific cause, but I haven't managed to narrow it down further than Bootstrap.

The fiddle here is set up as follows:

• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
• Mobile Safari on the iOS simulator (iPhone 6 - iOS 8.1, although I have confirmed this to also be the case on a physical iPhone)

When clicking in the area marked in red:

The input is focused:

The issue here is two-fold:

1. Touching anywhere on the screen trigger the input to focus - this even occurs on a scroll event
2. The keyboard does not pop-up. Even if a user wanted to enter text into the input, they need to click it again to trigger the keyboard.

I have been able to confirm the following:

1. Removing EITHER bootstrap.min.css or bootstrap.min.js fixes the issue.
2. Removing class: form-control from the input style fixes the issue.
3. Mobile Safari does not attempt to autofocus form elements on its own.

Greatly appreciate your help in tracking down this issue. I'm not sure if it's a browser bug (caused by adding :focus styles to an element with the autofocus attribute set), or a javascript event.

[twbs-lmvtfy]

Hi @asafbrukarz!

You appear to have posted a live example (http://fiddle.jshell.net/9ryem7u4/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 39, column 5: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further. Thanks!

(Please note that this is a fully automated comment.)

[asafbrukarz]

Update the fiddle to remove superfluous rows and grids.

[cvrebert]

Possible duplicate of #14532.

[cvrebert]

None of our JS should be getting activated in this case, so the bug is very unlikely to be JS-related.

[asafbrukarz]

@cvrebert I wouldn't have thought that it was JS related either, but removing the JS file certainly makes a difference.

[cvrebert]

Right, but none of our JavaScript acts unbidden on forms or plain text form-controls... Maybe the mere act of adding a document event listener has some weird side-effect on Safari? IDK, just spitballing here.

[hnrch02]

Uhm, according to http://caniuse.com/#feat=autofocus autofocus isn't even implemented in iOS Safari.

[cvrebert]

Fork without the autofocus attribute: http://jsfiddle.net/gzxtb86c/3/

[cvrebert]

Yup, still happens without autofocus.

[cvrebert]

Also, I can't repro the "keyboard doesn't pop up" part with either fiddle. Using iOS 8.1 on an actual iPhone 5S.

[asafbrukarz]

You're correct. It's only on the simulator that the keyboard doesn't pop up.

Also, a touch start event will trigger this behaviour, so it's not limited to tapping.

[asafbrukarz]

Sorry, I accidentally closed this issue.

The other point to note is that in your fork the focus style is not applied to the input, where in the original, the blue outline has been applied - even though Mobile Safari should not support autofocus at all.

[asafbrukarz]

Just confirming that this is still an issue in 3.3.4

[mdo]

Is this a browser bug then that needs reporting?

[asafbrukarz]

I believe so, but don't have the means to test it. 

On Saturday, 25 Apr 2015 at 6:06 pm, Mark Otto notifications@github.com, wrote:

Is this a browser bug then that needs reporting?

— Reply to this email directly or view it on GitHub.

[mdo]

Anyone willing to test this out? If not, I'm probably going to punt on it until after v4.

[cvrebert]

@mdo Already confirmed it earlier. Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=146244

[cvrebert]

Filed Safari bug: http://openradar.appspot.com/21509310

[cvrebert]

Fixed in WebKit: http://trac.webkit.org/changeset/191954