Using data-toggle on a <label> with an <input> prevents default functionality
See original GitHub issueUsing data-toggle on a <label> with a <input type="radio|checkbox"> prevents default functionality of the input toggling between the items.
OS: MacOS Sierra Browser: Safari
JSBin: https://jsbin.com/selasukami/edit?html,css,output
v4 alpha-6 Bootstrap
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:9 (8 by maintainers)
Top Results From Across the Web
stop label from toggling the input checkbox - Stack Overflow
The best solution would be to let label toggle the checkbox as ... You could prevent the default behaviour of the click event...
Read more >JavaScript - Bootstrap
As of 3.0.0, all Bootstrap events are namespaced. All infinitive events provide preventDefault functionality. This provides the ability to stop the execution ...
Read more >The Label element - HTML: HyperText Markup Language | MDN
The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. · When a...
Read more >lightning-input - documentation - Salesforce Developers
The components are automatically wired up to your record data, labels, ... The component uses date-style="medium" by default to display the date in...
Read more >Javascript - UA Bootstrap - Arizona Digital
Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

That’s due to : https://github.com/twbs/bootstrap/blob/v4.2.1/js/src/tab.js#L240
This sort of pattern https://jsbin.com/selasukami/edit?html,css,output seems to try and do two things at the same time. The controls should either be tab controls, or radio buttons…not both. As such, I’d suggest this is not a pattern we’d want to fix/support nor encourage in our code.