Bug in mdc-textfield--multiline with js auto-init

[henryhadlow]

What MDC-Web Version are you using?

0.17.0

What browser(s) is this bug affecting? What OS are you using?

Please include the browser version. A user-agent string is also quite helpful.

Google Chrome	60.0.3112.101 (Official Build) (64-bit)
Revision	1f3c0cf4b3083dfbe4da434af1726820cf384ce3-refs/branch-heads/3112@{#723}
OS	Mac OS X
JavaScript	V8 6.0.286.54
Flash	26.0.0.151 /Users/henryhadlow/Library/Application Support/Google/Chrome/PepperFlash/26.0.0.151/PepperFlashPlayer.plugin
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36

What are the steps to reproduce the bug?

• Render a multiline textfield with the required attribute set
• Use the js auto-init

<div class="mdc-textfield mdc-textfield--multiline" data-mdc-auto-init="MDCTextfield">
  <textarea id="multi-line" class="mdc-textfield__input" rows="8" cols="40" required></textarea>
  <label for="multi-line" class="mdc-textfield__label">Multi-line Label</label>
</div>

What is the expected behavior?

The textarea should render normally

What is the actual behavior?

The component renders with a red border

Any other information you believe would be useful?

https://codepen.io/henryhadlow/pen/gxvWEO

[kfranqueiro]

This occurs regardless of whether you use auto-init, instantiate directly, or don't use JS at all - here's a codepen with the other two cases. Were you seeing different results for those cases?

MDC Web doesn't have special logic to mark invalid fields; instead, it relies on the native implementation of HTML5 form validation and the CSS :valid pseudo-class. This behavior is working as intended according to the HTML standard for the required attribute.

Tangentially but possibly of interest, #1018 and #1092 discuss and implement adding the ability to signal validity from custom validation logic.