Skip to content

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

@richardebeling

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions