Create a md-list with a list item; in that list item have more than one checkbox. The entire list item is treated as a label/activator for the first checkbox because the entire list item is a button.
Imagine a form in a list item. Instead of just a single form element in the list item.. There needs to be a way to turn off the 'default' button behavior of a list item.
Which browser?
I've only tried this in the lastest stable chrome Version 79.0.3945.117 (Official Build) (64-bit)
What is expected?
I should be able to click on a list item that doesn't have any of the following events bound to it and it should not behave like a button:
click
dblclick
mousedown
mouseup
What is actually happening?
a plain md-list-item acts like a button and fires off a "click" event. So if you click on anything in the list the first checkbox gets "clicked". You'll even see an animation for it.
I used some layout to make it easier to read.. but the md-layout stuff can be removed and the problem persists. I'm not even sure why the checkbox isn't showing checked in this example - but you at least see the md-ripple animation being applied to it as if it were being clicked no matter where you click.
Steps to reproduce
Create a md-list with a list item; in that list item have more than one checkbox. The entire list item is treated as a label/activator for the first checkbox because the entire list item is a button.
Imagine a form in a list item. Instead of just a single form element in the list item.. There needs to be a way to turn off the 'default' button behavior of a list item.
Which browser?
I've only tried this in the lastest stable chrome Version 79.0.3945.117 (Official Build) (64-bit)
What is expected?
I should be able to click on a list item that doesn't have any of the following events bound to it and it should not behave like a button:
What is actually happening?
a plain md-list-item acts like a button and fires off a "click" event. So if you click on anything in the list the first checkbox gets "clicked". You'll even see an animation for it.
Reproduction Link
https://codesandbox.io/s/vue-material-controls-lzk7q
I used some layout to make it easier to read.. but the md-layout stuff can be removed and the problem persists. I'm not even sure why the checkbox isn't showing checked in this example - but you at least see the md-ripple animation being applied to it as if it were being clicked no matter where you click.