0

I am pre-filling a few text fields and the border is not visible. enter image description here

I am using, for example, the following JavaScript to pre-fill the field(s) but the outline is not rendered until I click / unclick the field. I tried 

var doc = document;
doc.getElementById("other-number-tf-ex-input").parentElement.classList.add("mdc-text-field--upgraded");
doc.getElementById("other-number-tf-ex-input").nextElementSibling.classList.add("mdc-text-field__label--float-above");
doc.getElementById("other-number-tf-ex-input").value = values[1].otherPhoneExtensionCode;
window.mdc.autoInit();

HTML is:

<div class="account-telephone-outlined-wrapper">
    <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense tel-medium" data-mdc-auto-init="MDCTextField">
        <input required pattern="^[0-9]*$" type="text" id="cellular-number-tf-cc-input" class="mdc-text-field__input" aria-controls="cellular-number-tf-cc-message">
        <label for="cellular-number-tf-cc-input" class="mdc-text-field__label">1</label>
        <div class="mdc-text-field__outline">
            <svg>
                <path class="mdc-text-field__outline-path" d=""/>
            </svg>
        </div>
        <div class="mdc-text-field__idle-outline"></div>
    </div>
    <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="cellular-number-tf-cc-message">
        00000
    </p>
</div>
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91

2 Answers2

0

You should explicitly instantiate an MDCTextField object, then set the value:

var doc = document;

var field = new mdc.textField.MDCTextField(doc.getElementById("other-number-tf-ex-input-container"));
field.value = values[1].otherPhoneExtensionCode;

This just works for me and triggers the floating label.

Pay attention to other-number-tf-ex-input-container id: it must point to the container mdc-text-field div.

Michele DC
  • 109
  • 1
  • 11
0

I only set the normal disabled textfield configuration (the disabled class and input's disabled property) but programatically set the value, such as:

myMDCtextfield.value = "myvalue";

And that trigger the floating label :)

José Pulido
  • 432
  • 4
  • 11