Material-components-web: Text-Field ripple does not extend to the end when used in Dialogs

[j-o-d-o]

Bug

TextField ripple not working properly in Dialogs.

What MDC Web Version are you using?

0.29.0

What browser(s) is this bug affecting?

Chrome 63.0.3239.132

What OS are you using?

Win 10

What are the steps to reproduce the bug?

Put Textfield with ripple effect in Dialog: https://codepen.io/j-o-d-o/pen/ppXRBw?editors=1010
It works properly outside of Dialogs (as shown in the codepen).

What is the expected behavior?

Ripple should extend all the way till the end of the textfield

What is the actual behavior?

Ripple does not extend all the way to the end:

[bonniezhou]

Thanks for filing this bug! Added to our tracker.

The issue arises from the ripple dimensions being calculated using dimensions of the text field before the text field is visible (and thus before proper width/height styles have been applied to it). Calling MDCTextField.layout() would re-calculate the ripple dimensions, but we have to wait until the dialog finishes opening before we do that, otherwise it will continue to use the text field's pre-styled dimensions.

The solution is to emit a custom MDCDialog:openAnimationEnd event on which clients can register their own handler that calls MDCTextField.layout().

[austinw-fineart]

I'd like to add that this applies to any unbounded ripples in a dialog, including components that use it; it's much more obvious with checkboxes or radios. The only easy workaround right now is to get rid of the scaling transform on the dialog container, though you lose out on that opening transition.