Custom styling md-checkbox may lead to extra space that indicates pointer cursor but cannot change checkbox value

[thanhpd]

Bug, feature request, or proposal:

Bug:
When using Material2 checkbox, custom styling the checkbox may lead to unused blank space that indicates pointer event and there is ripple animation when click on, but the checkbox value does not change afterward.

What are the steps to reproduce?

• Modify style so that the md-checkbox is big (e.g., height, width, using with other elements, etc.)
• Click on space that has pointer cursor of md-checkbox but not on the checkbox itself or the associated label

Example: Please take a look at this Plunker: https://plnkr.co/edit/NZ5KKpyk20UPRhbnritb?p=preview
The first line using a Material2 checkbox in conjunction with a Material2 input, wrapped in a flexbox. The checkbox has some extra space (indicated by red color, which is due to the Material2 input has some inner margin) that shows pointer cursor and clicks on it activate ripple animation of checkbox but the checkbox value does not change.

What is the expected behavior?

I think there are two possible outcomes that also included in the Plunker:

• Make the checkbox changes value when click on extra space, or
• Limiting the clickable area to be only the checkbox and it's label

What is the use-case or motivation for changing an existing behavior?

The extra space has pointer cursor indicates that user can change value of checkbox but it did not change upon click

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta1
All browsers

[devversion]

Thanks for the issue. I think that this has been fixed with 6381948. I will confirm it as soon as possible.

[thanhpd]

@devversion This issue still persists with new release beta.2, I think.
Plunker example: https://plnkr.co/edit/ldlRm67UCz00i70JtFUa?p=preview

[kvetis]

The issue can still be observed when display: block; is applied to the mat-checkbox.

Stackblitz demonstration

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}