-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
V5 beta3 - deselecting button group checkbox on ios safari doesn't work. #33481
Comments
That is unselected in real, just the color is there because of the hover rule. 🤔 /CC @patrickhlauke |
@rohit2sharma95 indeed. see also #31149 |
Hey! I'm looking for a workaround in the interim. Will a pure css fix like this work?
Or is there something else I should do? |
i wouldn't rely on might be worth tweaking/patching the core styles to just suppress the hover and possibly focus background change altogether. |
Hey all, is there any interest/plan to fix this? Or should I work on my own fix locally? |
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
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 See it live @ https://codepen.io/amarinediary/full/ExZRjRq. |
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? |
@alexgodin Indeed the |
It does. The checkbox is only displayed for the codepen demo. @alexgodin |
🎊 🎊 Big ups to @amarinediary -> the hero we needed! |
My initial fix wasn't working with bootstrap /**
* 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;
} |
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. |
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.
The text was updated successfully, but these errors were encountered: