Error

[Knuckles9090]

Getting this error, any ideas what could be the cause?

TypeError: n[0].nodeName is undefined

[Knuckles9090]

It seems to result from a conflict between angular-ui module and angular Strap module.

[nicklasb]

I sort of vaguely recognize this issue from an earlier schema-form issue where i had a similar problem.
In what situation do you get it?

[nicklasb]

The problem at that time was that I had properties in my database called nodeName and that came into conflict with the nodeName property of HTMLElement because schema-form sets the input field name to nodeName. And then you couldn't access that field using parentNode.nodeName, as that was the nodeName of the parent node.

This may sound like bad design of schema form, but is actually not, really, as the discussion in that thread reveals.

This is relevant of course, only if that problem is related to yours. :-)

[nicklasb]

This component does not depend on angular-ui. however angular-schema-form depends on ui-sortable, but only if one wants drag-and-drop reordering of arrays. So if there is a conflict you cannot resolve, check if you really use that feature.

Does this error start occurring when you add this component?

[nicklasb]

Hi,
I installed angular-ui to try and recreate the issue on either the example in this repository, and another application, both having angular-strap and angular-ui loaded, and I was unable to provoke a conflict.

If possible, please provide an example where this happens.

[Knuckles9090]

Hey, sorry for taking some time to get back to you. Busy at work etc etc.

var app= angular.module('app',
[
"ui.router",
"angularUtils.directives.dirPagination",
"ncy-angular-breadcrumb",
"ngResource",
"ngSanitize",
"ui.checkbox",
"schemaForm",
"pascalprecht.translate",
"ui.select",
"mgcrea.ngStrap",
"angular-underscore/filters",
"ui.bootstrap"
]);

This is the order of loading dependencies when my app is working. If I do the following for example, the app stops working.

var genesis = angular.module('genesis',
[
"ui.router",
"angularUtils.directives.dirPagination",
"ncy-angular-breadcrumb",
"ui.bootstrap",
"ngResource",
"ngSanitize",
"ui.checkbox",
"schemaForm",
"pascalprecht.translate",
"ui.select",
"mgcrea.ngStrap",
"angular-underscore/filters"
]);

I guess its a matter of loading dependencies in order...

P.S I am changing ui.bootstrap position

[nicklasb]

Ok.Strange indeed.
Especially if it only occurs when you add angular-schema-form-dynamic-select.

[nicklasb]

Ok, I have looked into it now and have found the cause of the problem.

This problem doesn't seem to have anything to do with this component, but is a problem with combining UI-Bootstrap and Angular-Strap in general.

It is only triggered by the fact that angular-schema-form-dynamic-select uses Angular-Strap.

The problem is reported:
angular-ui/bootstrap#3203

They seem to be working on a fix, the conflict seems to have been around for a while:
angular-ui/bootstrap#157

While they decide and implement a prefix solution, I recommend you to do as you proposed, and load ui.bootstrap before mgcrea.ngStrap.

Thanks for your troubleshooting!