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