Problems with custom renderer and validation triggered in custom elements

Question

My scenario is:

I've got a form which has a validation controller and validation rules
There is a containerless custom element in the form which wraps a password input, and exposes the current password as a bindable property
The validate binding behavior is used on the form's binding to this custom element property
The custom element also raises the blur event, so that the validation binding is triggered when the wrapped password input loses focus

The validation lifecycle is working as expected.

The problem I'm running into is with the custom renderer I'm using, which currently assumes the element it receives is the actual DOM input element so that a class can be applied to the input, and a sibling error element can be injected next to it, but here it's receiving the custom element that wraps the input, which can't be handled in the same manner because it's just a comment node in the DOM.

Is there a strategy or API in aurelia-validation that could solve this sort of problem? I'm stumped, and can't find much out there on working with custom elements within validation.

EDIT:

Here is the custom element template:

<template>
<div class="input-group -password">
    <div class="input-toggle-wrapper">
        <label for="password" class="-hidden" t="fields_Password"></label>

        <input
            id="password"
            type="${isPasswordVisible ? 'text' : 'password'}"
            value.bind="password"
            t="[placeholder]fields_Password"
            maxlength="20"
            focus.trigger="onInputFocus()"
            blur.trigger="onInputBlur()" />

        <div
            class="toggle ${isPasswordVisible ? '-show' : ''}"
            click.delegate="onToggleClick($event)"
            mousedown.delegate="onToggleMouseDown($event)"></div>
    </div>
</div>
</template>

I made it containerless because I don't want <password-box> emitted into the DOM as an outer element, as that breaks the current CSS rules for layout (and I don't want to change the CSS).

However if the custom element is containerless then I don't know how to access the first div inside the template using DOM navigation from the comment node that represents the custom element in the DOM.

Could you share your custom-element's code? Any specific reason for @containerless? Perhaps you will have to check whether the element is a real HTMLInputElement or a comment, and then choose the right strategy — Fabio Luz

Jordan M Jordan M · Accepted Answer · 2018-02-08T14:53:09

Unfortunately, Aurelia team has identified this issue and (at least as of now) said they won't fix it. https://github.com/aurelia/templating/issues/140

There is a hacky workaround for the issue as follows:

if(element.nodeType === 8) {
  element = this.getPreviusElementSibling(element)
}

If you add that within your render method for your renderer, it should work. Again, hacky, but it gets the job done in lieu of an official fix from the AU team.

Problems with custom renderer and validation triggered in custom elements

1 Answers