bug(Expansion Panel): Input element in ExpansionPanel prevent page scrolling while focused

[dopsun]

Reproduction

This can be observed in official example page of https://material.angular.io/components/expansion/examples.

Steps to reproduce:

1. Go to https://material.angular.io/components/expansion/examples
2. Scroll down to "Expansion panel as accordion" section
3. Focus on Input element (First Name), say key in any chars to confirm now this input element activated
4. Hover mouse over the text just entered
5. Using two fingers over touch pad to scroll up (My local OS is MacOS, but remote to an Windows OS, so two fingers scrolling. I guess this may also happen on Windows locally if mouse middle button is scrollable for the same function )

Expected Behavior

The page scroll up

Actual Behavior

What can be observed is that the text in the Input element is actually trying scrolling by itself within Input element, but not page.

Environment

• Angular: 11.1 (But I'm sure it's happening for other versions)
• CDK/Material: 11.1.1 (But I'm sure it's happening for other versions)
• Browser(s): Chrome/ IE Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Others

• This is not an issue in MacOS with Chrome browser.
• This is not an issue for Input element outside of ExpansionPanel. I suspect this is due to the font size change while putting MatInput inside the ExpansionPanel.

[dopsun]

To add:

• It will work fine, if change font size to 16px for input via css

[dopsun]

>>>... I guess this may also happen on Windows locally if mouse middle button is scrollable for the same function

Tested on a Windows PC with mouse, the issue also happens while hovering and try to scroll by mouse middle wheel.