1.3.0 Breaks Custom Element Validation about validation HOT 12 CLOSED

Unless Element in the above code block is from DOM, it should work.

This is a typical issue with combination of webpack, commonjs and DI. Because DOM.Element reference is used to early, before platform initialization populates the value of DOM.Element with proper reference so it injects undefined into DropdownField. Maybe you are referencing some modules too early that it triggers module evaluation before platform initialization starts.

from validation.

Unless Element in the above code block is from DOM, it should work.

This is a typical issue with combination of webpack, commonjs and DI. Because DOM.Element reference is used to early, before platform initialization populates the value of DOM.Element with proper reference so it injects undefined into DropdownField. Maybe you are referencing some modules too early that it triggers module evaluation before platform initialization starts.

Hmm, will look into this, thanks. So, something in 1.3 broke this? I noticed that the getTargetDOMElement method that my code is failing on was new in that release.

The weird thing is, though.. getTargetDOMElement does find the dropdown field if I set a breakpoint on it. It prints me the entire drop-down html element. It just gets that error on the "controller.container.get"

from validation.

Unless Element in the above code block is from DOM, it should work.

This is a typical issue with combination of webpack, commonjs and DI. Because DOM.Element reference is used to early, before platform initialization populates the value of DOM.Element with proper reference so it injects undefined into DropdownField. Maybe you are referencing some modules too early that it triggers module evaluation before platform initialization starts.

It looks like "Element" comes from "lib.dom.d.ts", what should this be coming from?

from validation.

@LilSebastian5000 I meant the real value of Element at runtime, not at design phase in TypeScript.

from validation.

@LilSebastian5000 I meant the real value of Element at runtime, not at design phase in TypeScript.

Oh okay thanks. It isn't the injected element anyways, because the issue and DI error still persist if I remove @inject(Element). Maybe I'm still misunderstanding your statement? This removal works fine in aurelia-validation 1.2.3 as well. If I don't remove the element injection and set a breakpoint on it in my constructor, the value of "Element" is correct; it prints me my drop-down element.

Question - why doesn't getTargetDOMElement just look at "controller.container.element"? When I set a break point where it fails at :
var element = controller.container.get(aurelia_pal__WEBPACK_IMPORTED_MODULE_0__["DOM"].Element);

I'm able to debug and find that the value of controller.container.element is the element I'm looking for. This seems like a bug and a breaking change to me since aurelia-validation has everything it needs to know about the element.

from validation.

@LilSebastian5000 It's a bit confusing. Can you try Element instead of DOM.Element?

from validation.

@bigopon How can I do that? From what dependency?

As shown in my snippet, Element is what I'm using inside @inject(Element), not @inject(DOM.Element)

getTargetDOMElement inside of aurelia-validation.js is the file looking at DOM.Element, which was part of the 1.3.0 upgrade. So, it sounds like you're saying that it should work if "Element" is not from the "DOM" object, but aurelia-validation is what looks for the DOM object, meaning it's looking for the wrong object. Correct?

I found this link which seems like it may help, but it returns a 404: https://aurelia.io/docs/templating/html-behaviors-introduction/#getting-the-dom-element-for-your-behavior

from validation.

Do you have containerless on your DropdownField?

from validation.

Do you have containerless on your DropdownField?

Hey there! As shown in my snippet, I was not using containerless. I did try using @containerless with @Inject(Element), as well as @containerless with @CustomElement('drop-down-field') and none of these combinations resolve the issue.

Note that I actually just downgraded to Webpack 3, which I was using all along before this upgrade, and the issue still exists there. aurelia-validation just seems to be looking at the wrong type of Element.

from validation.

Updated: I was able to get this working. It appears that "aurelia-framework" has quite a few outdated aurelia dependencies that we hadn't called out in our package.json previously.

I have now added the latest versions of "aurelia-loader", "aurelia-logging", "aurelia-router", "aurelia-metadata", and "aurelia-pal", and validation is now working.

from validation.

Oh well, that's unexpected. Glad you have it worked and guess we can close this? @LilSebastian5000

from validation.

Oh well, that's unexpected. Glad you have it worked and guess we can close this? @LilSebastian5000

Yep, all set, thanks!

from validation.