CODEWITHSUNDEEP
aurelia
Sam
Sam

Reputation: 6265

Problems with custom renderer and validation triggered in custom elements

I'm using [email protected].

My scenario is:

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.

Upvotes: 0

Views: 307

Answers (1)

Jordan M
Jordan M

Reputation: 1

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.

Upvotes: 0

Related Questions