chips ripple doesn't extend to the end of the text

[moog16]

Steps to repro:

1. click on filter chip with no leading icon

result: notice when the checkmark animates in, the ripple doesn't extend to the end of the chip

Can I ask you more detail about this issue?
I installed "@material/react-chips": "^0.10.0", but it looks to work well.

[moog16]

@TroyTae - this bug is specifically regarding FilterChips without a leading icon. The ripple isn't calculated correctly since there is no leading icon, and when the filter chip animates in, it still thinks its the shorter length.

Is there some bug replay code?
I test like this:
https://drive.google.com/open?id=17OgCyy24BA9j16utns3pADIx7Dird9Z9

[moog16]

I actually don't think you have the ripple on there. Although I the video might be missing some frames. Can you confirm this?

https://material-components.github.io/material-components-web-catalog/#/component/chips
Does MCW has same issue?
I can see that Ripple is appied my video and MCW example.
But when no leading icon Filter Chips, ripple doesn't spread from clicked point.

[moog16]

Actually it looks like the chips catalog page isn't working. I think this is an existing bug.

Regarding the filter input chips it looks like the ripple isn't completely working in the React screenshot tests. So this is still most likely a bug.

EDIT: I rechecked the web catalog, and it seems that chips only works if you navigate from the home page. The ripple there is working just fine. So if it still is an issue it is only happening in React land. We'll have to fix the issue shown in this screenshot to see if this is still a react issue.

I cannot sure that our thought same.
I think material-components-web-react and material-components-web had same issue.
Chip's ripple can't calculate clicked point.
So style variable "translate-start" has NaN.
Is your thought the same?

[moog16]

Ah you're correct - I thought that was working yesterday when I checked. That specific issue must be a MDC Web issue then. We cannot confirm if the chips ripple extends to the end of the text bug is fixed without fixing this bug first.

I confirmed this with this codepen.

[moog16]

@TroyTae looks like there is already an MDC Web issue for it: material-components/material-components-web#2812

@moog16
Fixed on material-components/material-components-web#4565

[moog16]

Cool! Looks like its in v1.1.1. Let's update chips to v1.1.1 in the feat/mdcweb-typescript-update branch.