form-control: missing cursor if switching off readonly on dblclick [Chrome+Safari]

[DenysVuika]

The issue can be observed here: jsfiddle
Was reproduced with Chrome 41.

Description: when switching off 'readonly' state of the input.form-control on the fly (via dblclick event) element stops showing text caret, however user can still type text. The issue is not reproduced for standard input controls without form-control class (see jsfidlle link above).

[twbs-lmvtfy]

Hi @DenisVuyka!

You appear to have posted a live example (https://fiddle.jshell.net/dvuyka/htua4ugm/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 52, column 73: Bad value true for attribute readonly on element input.
• line 57, column 52: Bad value true for attribute readonly on element input.

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.)

[DenysVuika]

The example was updated with readonly="readonly", this does affect the issue though.

[cvrebert]

Reposting so as to trigger the validator again: https://jsfiddle.net/dvuyka/htua4ugm/

[twbs-lmvtfy]

Hi @cvrebert!

You appear to have posted a live example (https://fiddle.jshell.net/dvuyka/htua4ugm/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 12, column 3: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.2.0
• line 13, column 3: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.2.0

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.)

[cvrebert]

Corrected to use latest Bootstrap: https://jsfiddle.net/w16tvcp2/2/

[cvrebert]

OS X Safari is also affected.

[cvrebert]

Simplified testcase: https://jsfiddle.net/f8utvj06/2/
Apparently this somehow relates to outline...

[DenysVuika]

@cvrebert Thanks for simplified scenario. I've noticed that control starts working when setting "outline: -2px;". I guess this is something to be fixed at 'form-control' side.

[cvrebert]

Filed Chrome bug: https://code.google.com/p/chromium/issues/detail?id=465274

[cvrebert]

Discovered a different Firefox bug in the course of investigating your bug; reported it as https://bugzilla.mozilla.org/show_bug.cgi?id=1141011

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=142477
Filed Safari Radar: http://openradar.appspot.com/20090003

[cvrebert]

Note that this isn't outline:0-specific. Chrome has the same problem with #input1:focus { outline: 5px solid red; }.
@mdo Any thoughts?

[zacechola]

These need to be added to the wall of bugs, @cvrebert?

[cvrebert]

@zacechola The Chrome bug, yes. The others aren't Bootstrap-specific.

[mdo]

Anything left to do here?

[cvrebert]

@mdo Unless you happen to know some relevant CSS magic or were to think this bug is more important than the custom :focus outline, I think this is CantFix/WontFix due to underlying browser bugs.