Skip to content

[MatCheckbox] nested ripple registers events even if disableRipple is set. #8854

Closed
@takamori

Description

@takamori

Bug, feature request, or proposal:

When using MatCheckbox, MatRipple and RippleRenderer is instantiated and registers events even if disableRipple is set on the checkbox.

What is the expected behavior?

If disableRipple is set, MatRipple and RippleRenderer should not be instantiated, or at the very least the events should not be registered during the initial render.

What is the current behavior?

There are 10 events registered for each checkbox, slowing down the render of the checkbox.

What are the steps to reproduce?

http://embed.plnkr.co/PZ0P3EerE2aeJPR4Kasa/

When clicking on the button to view Material Checkboxes, 30-45% of the time is spent on adding event listeners.

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

This is visible when using a virtual rendering component to show a large number of items with checkboxes and scrolling, or when rendering the full list as in here. The result is slow rendering or janky scrolling.

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

All versions are affected. Tested with Angular 2 with Chrome 62 on MacOS.

Is there anything else we should know?

Metadata

Metadata

Assignees

Labels

GThis is is related to a Google internal issueP3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentperfThis issue is related to performance

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions