tab key select radio button in buttons group in form submits no data

[yuan3y]

reduced test case:
http://jsfiddle.net/L9fep626/3/

This is a sample form I created using radio buttons following the example in http://getbootstrap.com/javascript/#buttons-checkbox-radio

What I found weird is that, if I

1. type in recipient text input and message textarea, and then
2. use [tab] key to jump to the button-group,
   press left/right button and space as one would expect to select a radio button, then
3. click submit,
4. result: on the receiving form, the $_POST shows no submission data about the radio button.

This is in contrast to using mouse to select radio button, the selected radio button will be captured and shown in $_POST data.

I would assume, the latter one is the expected behaviour of selecting a button even using keyboard. I have put in a console.log() at onchange event of each radio input, and both keyboard and mouse show that button checked is true.

This is tested on current version of Chrome and Firefox on Ubuntu.

Is this a misbehaviour due to Bootstrap code?
(http://jsfiddle.net/3j2nt0hz/1/ exactly the same html but disabling bootstrap, it works both using keyboard tab-arrowing and mouse clicking).

I would like to investigate what's going on when I [tab] and press arrow key, as contrast to clicking the mouse. How do I do that?

[patrickhlauke]

Note that in your code, the visa radio button should have the checked attribute in the HTML to match the active class you've got set. But I can confirm that there's definitely something strange going on here that seems to prevent the radio inputs from actually being "properly" checked (despite what the attribute on the object says, as per your console.log). In fact, removing the opacity:0 styling from the input itself, it becomes obvious that the underlying hidden radio button is not being properly set. /cc @fat @cvrebert @XhmikosR ... any ideas?

[patrickhlauke]

http://jsfiddle.net/L9fep626/7/ for the fixed example with pre-selected "visa" radio button (ignoring the automated moaning about autocomplete here, as i think they're helpful here in suppressing browsers remembering the previously checked radio button)

[patrickhlauke]

doing some more digging into the specifics of this issue, it seems that the culprit is

if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')

in button.js. it's necessary when interacting with the mouse, but this effectively undoes the change of checked that happens when using cursor keys/SPACE to make the selection via keyboard

reduced test case, with just the radio buttons and inclusion of the unminified bootstrap.js (so you can set a breakpoint on that particular line...see how when navigating with keyboard, the radio button changes when it reaches the breakpoint...and then when proceeding it gets reset) http://jsfiddle.net/L9fep626/10/

[edit: manually deleted the automated validation comments here as they were muddying the waters]

[patrickhlauke]

actually, tell a lie...it's the preventDefault() that fires as part of

  // BUTTON DATA-API
  // ===============

  $(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault()
  })

which is suppressing the standard keyboard behavior...but I'm guessing that this is necessary for situations where an element with a default behavior (such as a link) has been turned into a toggle? any way to differentiate, and not fire the preventDefault in situations like radio buttons?

[cvrebert]

Updated to use Bootstrap v3.3.4 instead of v3.2.0: http://jsfiddle.net/L9fep626/13/