Notched Outline on Text Field messes up the responsiveness when there's a value

[shiorap]

MDC React Version #: 0.7.1

##################################################

Browser: Chrome, Firefox and Safari

##################################################

Current Behavior:
When a text field has value, and the screen is resized, the notched outline doesn't seem to calculate correctly leaving it unaligned with the rest of the form fields.

##################################################

Expected Behavior:

text field outline should respond to screen resize just as if it doens't have a value on it.

##################################################

Additional Information:

Here's is a video link to show the current behavior: https://vimeo.com/307864643

Other MDC components involved in the html are:

• MDC React Layout Grid
• MDC React Button
• MDC React Icon
• MDC Card

The text field was set to 100% width to fit the card.

##################################################

[moog16]

@shiorap thanks for opening that issue with a video - that's a huge time saver for us. There were several issues with the old notched outline. There is currently a new notched outline, which we will build in MDC React. This refactor should fix your issue as well. I'll leave this issue open to ensure we don't have a regression.

[moog16]

This is no longer an issue since merging #697.