Material: md-checkbox causing md-list-item to be an interactive element

[smaye81]

When nesting an md-checkbox inside an md-list-item, the containing md-list-item is becoming interactive and clickable. This results in a ripple effect across the entire row as well as the nested checkbox itself.

Codepen here:

http://codepen.io/anon/pen/gpPZvJ

[Tyrannmisu]

I think that this is desired behaviour and not a bug.
At least the same thing happens on Android 5 with Checkbox and switch-elements in Lists.

I like this effect personally and never had any issues with it.

[smaye81]

I think this violates the principle of least astonishment, IMO, especially considering that other controls (input, radio button) do not have this behavior. I understand where you're coming from with row selection, but consider this example with multiple checkboxes:

http://codepen.io/anon/pen/gpPZvJ

You can see it becomes problematic.

[rschmukler]

Will forward to the the UX team to get their official stance. The item being interactive is indeed consistent with Lollipop, but we can make sure that it's an intentional choice by them.

[dmitriz]

Is this a guideline somewhere in https://developer.android.com/about/versions/lollipop.html?
Sounds indeed somewhat counter-intuitive to me.
When there are several checkboxes, I would never expect them to be in sync.
Even with a single checkbox it doesn't feel natural:

<md-list-item>
   ....
   Lots of text - bla bla bla
   ....
   <md-checkbox ng-model = "like">
      Did you like this short report?
   </md-checkbox>
</md-list-item>

So here as I am reading the text and accidentally click on it - I don't expect the checkbox down there to pick on it, I may not even notice it, get distracted or skip down or scroll.
It feels more intuitive to need to click on the actual checkbox, to express the action.

Maybe keep the md-list-item directive "light" and allow configuration options for additional effects (but not as defaults)?

[smaye81]

Yeah I think the multiple checkbox scenario is obviously not desired behavior. This should probably be an opt-in feature for the containing list-item rather than on by default.

Also, FWIW, I am currently getting around this in my app with the following:

.disable-md-clickable .md-ripple-container {
    display: none;
}

And then on my <md-list-item> element:

<md-list-item class="card disable-md-clickable" ng-repeat="item in items'"> ...

[Londovir]

@rschmukler - One point to consider in reference to Android 5, though: I've seen numerous cases in official Google Android apps where a secondary control (at least) embedded into a list does not cause an ink ripple through the entire list item when the secondary control is manipulated directly.

A good example is Google Play Music, which so far as I'm aware is at least generally representative of Material Design principles. In that app, if you bring up the menu and look at the "Downloaded only" list item in the menu, there is a switch secondary control. If you directly touch the switch control, there is an ink ripple, but _only_ within the switch itself. If you touch the list item outside of the switch, it ink ripples the _entire_ list (even behind the switch), and toggles the switch as though you clicked the switch. This is the behavior which I would expect, and which seems to be outlined in the Material Design spec as well.

The way the code currently works, though, if you put a checkbox (for example) into a list item, clicking the checkbox forces a $md.pressdown custom event to eventually bubble to the list item (if it is activated for rippling), which doesn't follow this convention.

[ThomasBurleson]

References #2595

[sagnitude]

A workaround is: wrap the md-checkbox inside a div element with a ng-repeat attribute:

<div ng-repeat="v in [0]">
   <md-checkbox aria-label="" ng-model=""></md-checkbox>
</div>

the click event will stop bubbling up.

[shivasingh0101]

can we use on to the md-list -item which has the checkbox to stop its default functionality.

ng-click="listClicked($event)" in to the md-list-item and then in js file

  $scope.listClicked=function(ev){
        // don't delete this method it is required for multiple checkbox in list item.
                  ev.stopPropagation();
    };

[uriva]

+1

[hedder]

@sagnitude
your fix is working. Thanks

[bojancai]

+1

[ThomsCass]

+1

@sagnitude Yes it's working but the css is broken

Here is how to fix it :

<div class="md-checkbox-div" ng-repeat="v in [0]">
   <md-checkbox aria-label="" ng-model=""></md-checkbox>
</div>

.md-checkbox-div{
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
}

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[sidhant-rajan]

+1

[Melanie-M]

Simple workaround

<md-checkbox class="md-secondary"
             ng-model="model"
             ng-click="$event.stopPropagation()">
 </md-checkbox>