twbs/bootstrap

IE11 radio button and checkboxes using button plugin don't work correctly when navigating with keyboard

Closed this issue · 11 comments

mynameisstephen commented

Steps to reproduce

  1. In IE11 tab to a radio button group.
  2. Press right or left to select a different radio button
  3. Tab out of the button group
  4. Unhide the underlining input tags. The selected radio button will differ from the selected input

The left and right keys are triggering the input tags to change however the display is not being updated.

kkirsche commented

Could you post a JSBin demonstrating the isolated issue?

mdo commented

Does this happen in every browser?

kkirsche commented

@animafact please don't post ads / links to third party sites unrelated to the issue.

@mdo I believe so, or at least seems to in Chrome of OS X — Assuming that I understood correctly that left and right moves the active class and prevents the user from selecting the focused element (via space bar) but does not change the actual active radio, which is the behavior I experienced in the JSBin

mynameisstephen commented

@kkirsche @mdo Hmm Firefox seems to be the only browser working correctly. Looks like Chrome and IE differ in behavior. IE will change the radio button on left and right keys but won't update the display while Chrome will update the display but won't update the radio buttons.

kkirsche commented

My guess is that this is being caused somewhere in https://github.com/twbs/bootstrap/blob/master/js/button.js#L56-L72

Removing the JS solves the value not moving but stops the active class from moving with the value. I'd need to dig in a little deeper to identify the exact cause in this

kkirsche commented

Odd... in a further stripped JSBin where I only load the button JS, this seems to prove opposite. Overlap with another JS component potentially? — http://jsbin.com/tojiro/edit?html,css,js,output

mynameisstephen commented

Ah, JSBin latest for bootstrap is still pointing to 3.3.4. Here is one that points to 3.3.5 - http://jsbin.com/gehiyohamu/edit?html,css,js,output - Chrome is fixed but IE11 still has the issue.

I'm guessing Chrome wasn't working in 3.3.4.

mynameisstephen commented

Had a quick look at it, IE11 no longer triggers the click event when the left and right arrows are used (IE10 works fine). So this line in the button-data api is never triggered,

  $(document)
    .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {

Might need to listen to a change event on the radio inputs instead.

patrickhlauke commented

Investigated this a bit further, and - unless I'm missing something - the radio buttons and checkboxes (using the button plugin) work as they should in firefox, chrome and edge, but do fail in IE11 (with a mismatch between what visually is being given the .active class and what is actually checked/enabled. will work on further tests and possible resolution, but for v4 we may move to a much cleaner implementation that's less reliant on brittle JS, as mentioned by @cvrebert ... so for now I'll primarily work on the v3 side of this bug

mdo commented

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team