Checkbox Button Remains Highlighted After Being Toggled to Off

[viztheman]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I've tried this issue in both Firefox Dev Edition and Chrome (via Electron) with the latest Bootstrap. Both had the same behavior.

Basically, when you click an outline checkbox button in a button group to turn it on and fill it in, it works fine. However, when you click to turn it off, the focus outline remains around it and nothing seems to happen. Clicking outside of the button (to disable focus) makes the button turn back off.

I believe this has to do with the browser holding focus on the button that was just clicked. Seems Bootstrap's common behavior is to fill in outline buttons when they're hovered over (which makes sense). However, the browser never relinquishes control over the button, so Bootstrap thinks it should go on treating the button as highlighted. This leads to confusion in the UX.

I haven't dug too hard into it since I don't know if this bug is a dupe. (I did search around, per the requirements.) I'm also using 5.2.0 from the quick start CDN page and not latest git master, so this may have been addressed already. Still, this caused me fits until I figured out what was going on, so I thought I'd write something up.

Reduced test cases

Build a basic Bootstrap boilerplate using the 5.2 quickstart page. Add a container and a checkbox button group using the same API docs and examples. Click a button to turn it "on," then click again to turn it "off." The second click seems like nothing happened, and the halo effect for active elements remains. Click somewhere else on the page, and everything goes back to normal.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

5.2.0

[mdo]

Duplicate of #26804 and #34664.