V5 beta3 - deselecting button group checkbox on ios safari doesn't work.

[alexgodin]

On any mobile browser (I just checked in latest iPhone Chrome on iPhone SE 2020) deselecting a checkbox inside a button group doesn't deselect until you re-select another component. We also see this on Android.

To reproduce open this codepen on an iPhone: https://codepen.io/alexgodin/details/gOgPRpL Select an option and then try to deselect it.

[rohit2sharma95]

That is unselected in real, just the color is there because of the hover rule. 🤔
And when you click somewhere else, that color is removed because the hovered style are removed then.

/CC @patrickhlauke

[patrickhlauke]

@rohit2sharma95 indeed. see also #31149

[alexgodin]

Hey! I'm looking for a workaround in the interim. Will a pure css fix like this work?

@media (hover: none) {
  div:hover { background-color: inherit; }
}

Or is there something else I should do?

[patrickhlauke]

i wouldn't rely on hover queries https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

might be worth tweaking/patching the core styles to just suppress the hover and possibly focus background change altogether.

[alexgodin]

Hey all, is there any interest/plan to fix this? Or should I work on my own fix locally?

[amarinediary]

Noticed that issue too. @alexgodin @patrickhlauke @rohit2sharma95 Issue can be seen straight from the Bootstrap Website Checks & Radios, Outlined styles. and from the Checkbox & Radio Button Groups on web mobile-view or mobile.

A touch screen device, is a device where the primary pointer system is the finger and can’t hover, will take the value of none. We can use @media (hover: none), (any-hover: none) { ... } to determine if the device is a touch primary device.

/**
 * Bootstrap v5.0.0-beta3, outlined button checkbox and form button checkbox issue related to focus/active status on web emulator mobiles/tablets-view and physical devices not properly reseting.
 * @link https://github.com/twbs/bootstrap/issues/33481
 */
@media (hover: none), (any-hover: none) {
  .btn-check:not(:checked) + .btn-outline-primary,
  .btn-check:not(:checked) + .btn-outline-primary:active,
  .btn-check:not(:checked) + .btn-outline-primary:focus {
    background-color: inherit !important;
    color: var( --bs-primary ) !important;
    box-shadow: inherit !important;
  }
}
.btn-check:not(:checked) + .btn-outline-primary,
.btn-check:not(:checked) + .btn-outline-primary:active,
.btn-check:not(:checked) + .btn-outline-primary:focus {
  box-shadow: inherit !important; /* Properly reset btn-check box shadow on desktop. */
}

This answer should work for most of the popular phones and tablets. Tho it will return to the default Bootstrap behavior on devices that can handle touch AND mouse as this fix is based on the any-hover media queries.

See it live @ https://codepen.io/amarinediary/full/ExZRjRq.

[alexgodin]

Hey Amarine! I just tried your codepen on my iphone (SE 2020, latest software) and the issue persists. Are you seeing it o your phone?

[amarinediary]

@alexgodin Indeed the :active state was also messing up the behavior, I've updated the Codepen and the answer. It should work properly. Also, thanks to you, I realized that the Chromium device emulator isn't displaying accurate behavior.

[alexgodin]

Got it! This does fix the behavior, but it doesn't hide the checkboxes.

[amarinediary]

It does. The checkbox is only displayed for the codepen demo. @alexgodin

[alexgodin]

🎊 🎊
It works!!!

Big ups to @amarinediary -> the hero we needed!

[amarinediary]

My initial fix wasn't working with bootstrap 5.2.x. The following address the focus issue and will be applied to all button checkbox without having to specify the color type.

/**
 * TEMPORARY FIX:  Bootstrap v5.2.x, outlined button checkbox and form button checkbox issue related to focus/active status on web emulator mobiles/tablets-view and physical devices.
 * @see https://github.com/twbs/bootstrap/issues/33481
 */
.btn-check:not(:checked) + .btn,
.btn-check:not(:checked) + .btn:active,
.btn-check:not(:checked) + .btn:focus {
    background-color: inherit !important;
    color: var(--bs-btn-color) !important;
    box-shadow: inherit !important;
}

[patrickhlauke]

This should finally be resolved more thoroughly here #37026 - taking https://deploy-preview-37026--twbs-bootstrap.netlify.app/docs/5.2/forms/checks-radios/#toggle-buttons and https://deploy-preview-37026--twbs-bootstrap.netlify.app/docs/5.2/components/button-group/#checkbox-and-radio-button-groups for a spin in Safari/iOS, it seems to behave correctly (without styling sticking) - and it makes it clearer even for mouse users.