bug([MatCheckbox]): MatCheckbox doesn't check on mobile in certain conditions

[KyleAlanDavis]

Reproduction

Resubmitting #17146, as noted on that issue.

I am not able to reproduce this on stackblitz, only in my current project.

When the viewing the page in mobile, clicking on the checkboxes causes the ripple effect on the background but does not check the checkbox. The regular html checkbox below it is able to be checked just fine.

Inspection of the event is showing that the event.isTrusted = false. I think that is the issue, but have no idea how it is happening.

To see the issue on a mobile device:

1. Open https://test.aryv.com/checkbox-test or https://aryv.com/checkbox-test (US only)
2. Click on the checkbox

To see the issue on Windows Chrome:

1. Open dev tools and set the tab to a mobile device.
2. Open https://test.aryv.com/checkbox-test or https://aryv.com/checkbox-test (US only) The tab must be in a mobile view before loading the page to see the issue or you can reload the page after setting it to mobile view.
3. Click the checkbox

Expected Behavior

The checkbox should be checked.

Actual Behavior

The ripple effect displays but the checkbox is not checked.

Environment

Since the last report, our project has been upgraded to v9.

• Angular: 7.2.8, 8.2.7, 9.1.0
• CDK/Material: 7.2, 8.2, 9.2
• Browser(s): Chrome, iOS Safari
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, Android, iOS

[devversion]

@KyleAlanDavis Thanks for resubmitting. The reproduction does not work for me. I always get a 403 forbidden status response. It sounds slightly surprising that the problem you're describing only surfaces in your project, but not in a StackBlitz.

[KyleAlanDavis]

@devversion Apologies, the site was only accessible to USA ipaddresses. I've gotten them to open up the test site, so https://test.aryv.com/checkbox-test should work everywhere.

[devversion]

@KyleAlanDavis Thanks for figuring that out. I can now load the page, but the app does not run as there are some errors in my browser (e.g. when loading the bundles). Looks like those are served from a CDN that blocks my country (GER)

It would be great to have this in a standalone StackBlitz, but you mentioned that you weren't able to see this there. This makes me wonder if it is something specific in your application that is not necessarily related to our checkbox.

[psamim]

I have the exact same problem in my code.

[BobDankert]

I have the exact same problem in my code.

Are you using AngularJS? That is what was causing our issue (@KyleAlanDavis and myself), details here: #20725

[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.}