Radio buttons focus not working (v4)

[Prid13]

Bootstrap radio buttons are not being visually highlighted on focus, and won't change on tab or be navigated with the arrow keys.

How to Reproduce:

1. Go to the official demo page: https://thednp.github.io/bootstrap.native/v4.html
2. Navigate to the Buttons sections, and find the radio buttons
3. Click on one of the radio buttons
4. Click on left arrow key or right arrow key -- nothing happens

The tab works on the demo page, but only because it has the tabindex="-1" attribute in the source code.

I needed this feature, so I hardcoded it myself in the source code. Feel free to use this as a starting point for the correct way to extend this plugin, as I have no idea what the proper way is, unfortunately.

TEMP FIX:

File bootstrap-native-v4.js, under the Button definition. Lines 453 to 481 are to be replaced with this (the changes made are in bold):

        if ( input.type === 'radio' && !toggled ) { // radio buttons
          if ( !input[checked] || (e.screenX === 0 && e.screenY == 0) ) { // don't trigger if already active (the OR condition is a hack to check if the buttons were selected with key press and NOT mouse click)
            addClass(label,active);
            addClass(label,"focus");
            input[setAttribute](checked,checked);
            input[checked] = true;
            bootstrapCustomEvent.call(input, changeEvent, component); //trigger the change for the input
            bootstrapCustomEvent.call(element, changeEvent, component); //trigger the change for the btn-group
  
            toggled = true;
            for (var i = 0, ll = labels[length]; i<ll; i++) {
              var otherLabel = labels[i], otherInput = otherLabel[getElementsByTagName](INPUT)[0];
              if ( otherLabel !== label && hasClass(otherLabel,active) )  {
                removeClass(otherLabel,active);
                otherInput.removeAttribute(checked);
                otherInput[checked] = false;
                bootstrapCustomEvent.call(otherInput, changeEvent, component); // trigger the change
              }
            }
          }
        }
        setTimeout( function() { toggled = false; }, 50 );
      },
      focusHandler = function(e) {
      	addClass(e[target][parentNode],"focus");
      },
      blurHandler = function(e) {
      	removeClass(e[target][parentNode],"focus");
      };
  
    // init
    if ( !( stringButton in element ) ) { // prevent adding event handlers twice
      on( element, clickEvent, toggle );
      queryElement('['+tabindex+']',element) && on( element, keyupEvent, keyHandler ), 
                                                on( element, keydownEvent, preventScroll );

      var radioBtns = getElementsByClassName(element, 'btn');
      for (var i=0; i<radioBtns.length; i++) {
        var radioBtn = radioBtns[i][getElementsByTagName](INPUT)[0];
        on( radioBtn, 'focus', focusHandler), on( radioBtn, 'blur', blurHandler);
      }
    }

A proper fix would include adding the strings "focus" and "blur" (event) to the constant definitions at the top of the file, and use those constants instead.

[thednp]

@Prid13 please confirm we're in good order, I want to tag a new release and push new npm version.

[Prid13]

Yes, it looks to work quite well in my case. I haven't tested it further than on my own application, so I can't confirm there aren't any bugs.

Sorry for late reply :)