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

Created by: 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?