I am having an issue with MDC web textfield component. The issue is that the outline does not stay when I click on the textfield to type in an input. See below for the pug and javascript code :
div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--filled
span.mdc-text-field__ripple
span.mdc-floating-label(id="first_name") First Name :
input.mdc-text-field__input(type="text" aria-labelledby="first_name")
span.mdc-line-ripple
div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--outlined
span.mdc-notched-outline
span.mdc-notched-outline__leading
span.mdc-notched-outline__notch
span.mdc-floating-label(id="last_name") Surname :
span.mdc-notched-outline__trailing
input.mdc-text-field__input(type="text" aria-labelledby="last_name")
const textFields = [].map.call(document.querySelectorAll('.mdc-text-field'), function (el) {
return new mdc.textField.MDCTextField(el);
});
const notchedOutline = [].map.call(document.querySelectorAll('.mdc-notched-outline'), function (el) {
return new mdc.notchedOutline.MDCNotchedOutline(el);
});
const floatingLabel = [].map.call(document.querySelectorAll('.mdc-floating-label'), function (el) {
return new mdc.floatingLabel.MDCFloatingLabel(el);
});
const lineRipple = [].map.call(document.querySelectorAll('.mdc-line-ripple'), function (el) {
return new mdc.lineRipple.MDCLineRipple(el);
});
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/E8t9g.png