search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

[TextField] line ripple is always centered #6037

Open sorvell opened 4 years ago

sorvell commented 4 years ago

Describe the bug It does not start at the spot where the input is clicked.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://material-components.github.io/material-components-web-components/demos/textfield/
  2. Use the inspector Animations tab to slow down animations to 10%.
  3. Click on the right side of the first input.
  4. Observe that the line animation starts from the center and not the right side.

Expected behavior Line ripple emanates from the clicked spot.

Additional context Compare with https://material-components.github.io/material-components-web-catalog/#/component/text-field

asyncLiz commented 4 years ago

I don't think this is an MWC-specific problem, it looks like an upstream issue with MDC

https://jsbin.com/veyusadafo/edit?html,output

The catalog is an older version. It looks like the transform-origin is no longer work since the line-ripple was changed to use an ::after pseudo element.

There's also a problem in that we're listening to pointer events on the <input>, which doesn't cover the full container anymore. MDC should be listening to events on the <label> host instead.