[mwc-textfied] Setting custom validity removes the mark up for an error/helper, hence causing the form to jerk

[rutwick-alic]

I am using setCustomValidity to validate an email address onInput. When the page loads, the markup for an error/helper message is there along with the input field. Now when I use setCustomValidity to set the field as valid and set the message as blank, the markup is removed, hence causing the form to jerk.

Any ideas on how to fix this, and whether this is a bug or no?

[taylor-vann]

related to 971

[taylor-vann]

Hey @rutwick-alic thanks for submitting!

The quick solve might be to set the pattern attribute to an empty string.

Then set the validationMessage to a single space to preserve spacing.

<mwc-textfield pattern="" validationMessage=" " ></mwc-textfield>

[rutwick-alic]

Hey @rutwick-alic thanks for submitting!

The quick solve might be to set the pattern attribute to an empty string.

Then set the validationMessage to a single space to preserve spacing.

<mwc-textfield pattern="" validationMessage=" " ></mwc-textfield>

Hey @taylor-vann, thanks a lot! Let me try doing this. I will update here accordingly. Here's a quick fix that I did for the time being. I had tried setting the validationMessage to a space earlier, but it will still show as invalid, or highlight in red when you focus out.

myCustomValidator = (ev) => {
    const value = ev.target.value || null;
    if (value) {
        const re = // some regex here;
        // Get a reference to the helper mark up to add
        const helperMarkup = ev.target.shadowRoot.querySelector("#my-helper")

        if (!re.test(value)) {
            // Remove the helper div if it is already there, otherwise it will display multiple helpers
            if(helperMarkup) {
                helperMarkup.remove()
            };
            ev.target.setCustomValidity("Please enter a valid address");
            this.isFormValid = false;
        } else {
            // HACKY METHOD: Explicitly append the helper div to avoid the form from jerking due to missing html
            ev.target.setCustomValidity(""); 
            if(!helperMarkup) {
                ev.target.shadowRoot.querySelector("label").insertAdjacentHTML('afterend', '<div class="mdc-text-field-helper-line" id="my-helper"><div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"><!----> <!----></div></div>')
            }
            this.isFormValid = true;
            this.value = value;
        }
    }
}