Include focus styling on button

[ngbrown]

• components: button
• reactstrap version 8.0.1

The bootstrap 4 js adds focus class to the styling of buttons on the focus event and removes it on the blur event. This helps for keyboard navigation of buttons.

https://github.com/twbs/bootstrap/blob/3d12b541c488ea09efced2fb987fcbf384c656bb/js/src/button.js#L164-L178

Reactstrap should do the same.

[TheSharpieOne]

I am not 100% sure why they do this, but it is not for every button. It is only for buttons which match data-toggle^="button" (the data-toggle attribute starts with "button")
It seems to only exist within the Button Plugin section of the button docs.
From what I can tell, it for when the "button" (the element with .btn) is not a <button> / focusable item (such as when it's a label).
We probably need to create a new component (I'm not sure if it would fit into the current button component), some kind of state/toggle button component.
IIRC, toggling button active class was left to the user since it required state and most stateful things were left to the user of the lib. I think now, that this is needed and we should add it to the lib.

[Ashniu123]

I think I can do this, pls assign it to me

[TheSharpieOne]

It's all your @Ashniu123

[Ashniu123]

Thanks!
This is what I'll do:

• Make a new component - ButtonToggle (or whichever name is more suitable)
• Replicate Button component
• Add blur and focus event handlers for removing and adding the .focus class respectively

Sounds good?

[TheSharpieOne]

I would try to import and use the existing Button component if possible instead of replicating it. Basically manage the state of focus to conditionally apply className="focus to the existing Button.