Button checkboxes do not uncheck

Created by: jscarle

The problem is when unchecking. When the button transitions from a checked to unchecked state, the button remains filled until a) the mouse is moved on device with a cursor, or b) another location on the page is touched on a touch device. The user obviously believes that they have not unchecked the button when it has in fact been unchecked and then proceeds to continue to attempt to uncheck the button.

Apparently the bug is:

The "bug" is in mixins/_buttons.scss in the @mixin button-outline-variant ... it defines both .btn-check:checked + & and .btn-check:active + & with the same styling as per Vino from Stack Overflow.

https://stackoverflow.com/questions/68640977/remove-focus-on-boostrap-5-toggle-button-after-click