fix(material/core): ripple coords when trigger is not the container #29020
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request is a proposal to fix coordinates emitted from the trigger element when it's different than the container element.
Actual behavior
When a pointer down event (
mousedown: MouseEvent
ortouchstart: TouchEvent
) is emitted from the trigger element, itsclientX
andclientY
properties are used to callRippleRender::fadeInRipple
.In case where the trigger element is the ripple container element,
clientX
andclientY
are inside the container dom rect.But when the trigger element is different than the ripple container element (a trigger element can be set by using
matRippleTrigger
input),clientX
andclientY
are outside the container dom rect.Expeded behavior
In case where the trigger element is different than the ripple container element, using
clientX
andclientY
properties and calculating an equivalent point in the container element before callingRippleRender::fadeInRipple
.Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-gtvxae
<div matRipple matRippleRadius="10" [matRippleTrigger]="trigger"></div>
<button #trigger>Trigger Button</button>
clientX
andclientY
properties are fixed and the ripple element (green dot in screenshot below) is positionned correctly inside the ripple container dom rect