JS - button plugin stop event propagation on checkboxes/radio when browsing with keyboard

After looking at the previous issue https://github.com/twbs/bootstrap/issues/26904

And play with the associated codepen : https://codepen.io/Johann-S/pen/GBqoZG?editors=1111

I could still reproduce the use-case in current documentation on 3 way radio toggle buttons : https://getbootstrap.com/docs/4.3/components/buttons/#checkbox-and-radio-buttons

1 - browse the input element with keyboard 2 - change the selected item using keyboard arrow 3 - look in the console document.getElementById(‘option2’).checked or other optionid the current value isn’t the visual one

Works well when using mouse

My first tests :

• $(input).trigger(‘change’) is well executed with keyboard or mouse but maybe there’s sub-jascent events to propagate?
• by removing the event.preventDefault() from plugin initialisation state change well with keyboard

$(document)
  .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
    // event.preventDefault()

First tests doesn’t show anything is broken by removing this

[patrickhlauke]

i suspect the preventdefault is a remnant of the old way in which these buttons were coded (seem to remember that it wasn’t the actual <input> that ever received focus, but the parent element, and we then had to fake-click the hidden <input> etc). i’ll have a look tonight, as i’d really like to put this to bed once and for all 😉

[patrickhlauke]

Think this issue can now be closed following #28834 (should have autoclosed but didn’t…)