MDC - Text Input can't be initialized

Question

I'm setting up a text input with MDC but when I'm initializing with JS it comes out this error:

This is my code:

// MDC
const mdc = window.mdc;

// Auto init
mdc.autoInit();

$('.mdc-text-fields').each((index, element) => {
  const textField = mdc.textField.MDCTextField.attachTo($(element)[0]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">

<div class="mdc-text-field">
    <input class="mdc-text-field__input" type="text">
    <label class="mdc-floating-label" for="class_name">Nome classe</label>
    <div class="mdc-line-ripple"></div>
</div>

Can you help me? Thanks

score 1 · Accepted Answer · answered Dec 13 '19 at 11:26

Strangely, it worked now removing const textField =...

This is the new JS code:

// MDC
const mdc = window.mdc;

// Auto init
mdc.autoInit();

$('.mdc-text-fields').each((index, element) => {
    mdc.textField.MDCTextField.attachTo(element);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">

<div class="mdc-text-field">
    <input class="mdc-text-field__input" type="text">
    <label class="mdc-floating-label" for="class_name">Nome classe</label>
    <div class="mdc-line-ripple"></div>
</div>

Reference for this solution: https://stackoverflow.com/a/52021265/7520280

Been trying to make my textfield work for hours, your solution worked just fine, thanks! — Jonathan, Nov 08 '22 at 16:04

MDC - Text Input can't be initialized

1 Answers1