Bootstrap Radio Button Group Posts Wrong Value after Keyboard Select

Question

I have this bootstrap button group with radio buttons:

<div id="MyField" data-toggle="buttons" class="btn-group">
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val1" autocomplete="off">First</label>
    <label class="btn btn-primary btn-sm active"><input type="radio" name="MyField" value="Val2" autocomplete="off" checked="">Second</label>
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val3" autocomplete="off">Third</label>
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val4" autocomplete="off">Fourth</label>
</div>

If I select the value using the mouse, everything works fine. However, if I move to the group using the tab key and select another option using the keyboard arrow keys, the following happens:

• The active button changes visually as expected
• The change javascript event (handled using jQuery $('#MyField').change(...)) is fired as expected
• When the form is submitted, the original value of the default selected radio button is sent to the backend.

Any ideas on why this is and how to fix it?

Answer 1

Turns out this is a bug in bootstrap 3.3.4 which is fixed in 3.3.7. After an update, everything works fine.