Radio buttons: .btn-group-toggle: Keyboard selection only works visually.

[richardebeling]

In a toggle button group, if you select a button using the keyboard, the underlying selection of the radio inputs is not changed. Thus, if you have these buttons in a form and submit the form, the user might submit an unintended selection.

I guess this is related to #18874. I added a comment there, but there was no reaction.
#25122 and #26778 are possibly related but no duplicates imo.

Steps to reproduce:

• In a toggle button group, click on one button with the mouse
• Then, change your selection with the arrow keys (left / right)

Expected Result:

The radio input that represents the now selected button is checked

Actual Result:

The radio input selection is not changed although the visuals indicate that it was changed. (tested in firefox 60.0.2, firefox 61.0.1 and chrome 67.0.3396.99)

Example Code

You can reproduce the issue here. The html code is copied from the docs. I only added css to remove the clip property on the inputs so you can see which input is selected.

[Johann-S]

you're right it seems the normal behavior of a radio button 🤔

/CC @patrickhlauke

[RinkAttendant6]

I can reproduce this as well on Firefox 61 and Edge 17.17134

However it seems to work perfectly fine in IE 11 🤔

[nathan-charrois]

Can confirm this is an issue in Firefox 64, and Chrome 71, Safari 12.0

[richardebeling]

If someone comes by here and is searching for a solution: This is the work around we came up with: https://github.com/fsr-de/EvaP/pull/1326/files

$(document).on("click", '[data-toggle^="button"] input[type="radio"]', function(event) {
  // Bootstrap will call event.preventDefault() which results into a reset of the radio buttons before the keyboard input.
  // To work around this, we set the method to one without side effects.
  event.preventDefault = () => true;
});

[Lausselloic]

Fix is in progress for V4 and V5 thanks to @patrickhlauke
#28565

[patrickhlauke]

[deleted comment, as it was in the wrong thread]

[patrickhlauke]

sorry, late reply...fixed with this, i believe #28834

[LinqLover]

Are you really sure this has been fixed in v4? For me, the radio group example from the docs still does not register the selection in the model if I use arrow keys ...

[patrickhlauke]

there were further changes that broke it apparently, but then further fixes after that. in the end the complete fix came in 4.4 https://getbootstrap.com/docs/4.4/components/buttons/#checkbox-and-radio-buttons

in general, suggest updating to the latest version