RangeError: Maximum call stack size exceeded

[LeonardoGentile]

Hello, first thanks very much for this! 👍
I'm using ui-select version and I'm facing 2 problems:

1 Bug?

I retrieve the options in async way using this options:

"options" : {
   "refreshDelay": 200,
   "asyncCallback": refreshSelect
 }

My callback is something like this:

function refreshSelect(myService){
    return myService.list() // a restangular promise 
        .then(function(items) {
            var options = [];
            items.forEach(function(item){
                options.push({"name": '' + item.name, "value": '' + item.id, selected: item.id === $scope.formData.publisher ? true : false});
            });
            // return a response similar to the one returned with $http (that is having a `data` field)
            var returnData = {};
            returnData.data = options;
            return returnData;
        });
}

And my select gets populated.

The problem comes when I select an item, then in the console I can see:

It seems tv4 is triggered multiple times. I am not sure if this is a problem coming from this project or from schema-form. I've never had this errors with other custom fields.

2 question:

When I have an edit form (not creating but editing) , I already have the value for the select field ($scope.formData.example) but not the options yet (because async). As you can see from the code above I try to find the selected one by adding a field selected : true.

How can I use this information to autoselect the correct item? Is there a better way to do so?

[nicklasb]

1. Hard to tell. Please create a plunkr or similar that displays the error.
2. This should work already, as that is being handled in finalizeTitleMap, and that is being called when asyncCallback is returning from the promise.

Saw that it would be a nice feature if ASFDS checks if there is a data field and if so uses that before continuing to use the result as-is. That way it would handle restangular as it you would only need to map the properties.

[nicklasb]

I have also looked in the example. It seems like it works there as well, I think a plunkr would help not only explaining to me, but perhaps help you debug.

[nicklasb]

I should probably create a default plunkr for users to use, ASF is making one now, I will base it on that, if so.

[LeonardoGentile]

Thanks for your quick answer 👍

As a hint I could say that instead of defining the form definition in the $scope.form = [] array I'm using the x-schema-form properties of the schema. It should not change anything, because the form is correctly generated...but maybe it is the main difference with the examples, I'll try to dig a bit more and a base plunkr to start from would be awesome

[nicklasb]

I would strongly advise against that, to quote the docs: "It's recommended to split presentation and validation into a form definition and a json schema."

Actually, it is a little bit worse, as it completely goes against the json-schema-form concept where the clear separation of concern is one of its strongest features.

But again, create a plunkr, and I will try and help you.

[LeonardoGentile]

@nicklasb I've been able to produce a plunkr: https://plnkr.co/edit/3GRu9eu5j49H3gisqBkf?p=preview
and indeed the problem n.1 comes from the x-schema-form usage. I'm using it not because I didn't read the the docs but because of this specific problem: json-schema-form/angular-schema-form#668
I've been able to use the x-schema-form with other custom field (for example the date-picker) but only the dynamic select is producing this problem.

As for the problem n.2 you can see that I set the $scope.formData.publisher = 2 as soon as I get the async data. But the value is never autoselected. I think this is because you are setting ng-init="insideModel=$$value$$;" but my model formData is also async so not available when the form is created, so I guess the ng-init won't be very useful? I might be wrong.. but when evaluating the finalizeTitleMap the scope.insideModel is always undefined.

[LeonardoGentile]

PS: the default selected filed seems to work ONLY if the scope.form is defined after having retrieved the model data, that is (relatively to the plunkr):

DEFAULT DO NOT WORK

$scope.form = ["publisher"];
$timeout(function() {
    $scope.formData = formData;
  }, 200);

DEFAULT WORKS

$timeout(function() {
    $scope.formData = formData;
    $scope.form = ["publisher"];
  }, 200);

and as I said above, it seems due to the ng-init you are using for setting the insideModel. Maybe a one-time watch should be used instead?

[nicklasb]

What is the state of this issue?