Checkbox with data-bs-toggle: Inconsistent state on double-click or reload

[michael-struwe-mischok]

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

Put data-bs-toggle on a checkbox like this:

           <div class="form-check">
                <input class="form-check-input" id="flexCheckDefault" type="checkbox" data-bs-toggle="collapse" data-bs-target="#collapseExample" checked>
                <label class="form-check-label" for="flexCheckDefault">
                    Default checkbox
                </label>
            </div>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    Some placeholder content for the collapse component. This panel is
                    hidden by default but revealed when the user activates the relevant
                    trigger.
                </div>
            </div>

Trigger the bug in one of the following two ways:

1. Check the checkbox, then reload (tested in Firefox 95.0.1)
2. Double-click the checkbox

Observation: It is possible to get into one of these states, and then clicking on the checkbox will toggle between them, even though both are bad states:

• The checkbox is on, but the content is not shown
• The checkbox is off, but the content is shown

Expected behavior: On page load and on interaction, the bad state should be detected and fixed (which combination is considered good is defined by the presence of the "checked" attribute). Or the developer experience should make it clear that this usage is not supported.

Reduced test cases

https://output.jsbin.com/lixazupoma

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

Linux

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

Firefox

What version of Bootstrap are you using?

v5.1.3

[mdo]

I don't think we built the collapse plugin with checks/radios in mind. Would need to hear from @twbs/js-review.

[michael-struwe-mischok]

See also PR #22272 ; as far as I understand it was done with the explicit intent to support the combination of checkbox/radio + collapse.

[ffoodd]

I think this was dropped for accessibility reasons: a checkbox has its own role and state, thus cannot convey role ans states needed for the collapse component.

This is not something we should handle, IMHO.

[mdo]

Closing per above comment.

[michael-struwe-mischok]

I think the above comment only said that the correct solution for this is not to support the use-case. The issue description proposes a second solution as well:

Or the developer experience should make it clear that this usage is not supported.

For instance, #22272 could be reverted. Or in the if-case that was inserted in that PR, a console.warning(...) could be emitted.