setCallback: Maximum call stack size exceeded

Question

component markeup:

<aura:component controller="TaskController" >

    <aura:attribute name="task" type="Task" default="{'sobjectType': 'Task'}" /> 
    <aura:attribute name="accountId" type="String"/> 
    <aura:handler event="c:AccountSelectionEvent" action="{!c.handleAccountSelection}" />

    <div class="card-list context-account">
        <div class="card">
            <div class="card-list-heading">
                Enter Task Information:
            </div>
            <div class="card-detail">
                <ui:inputText class="form-control" aura:id="subject" label="subject" value="{!v.task.Subject}" required="true"/>
                <ui:inputSelect aura:id="priority" class="form-control" label="priority" value="{!v.task.Priority}" multiple="false">
                    <ui:inputSelectOption text="High" label="High" value="true" />
                    <ui:inputSelectOption text="Normal" label="Normal"   />
                    <ui:inputSelectOption text="Low" label="Low"   />
                </ui:inputSelect>
                <ui:inputSelect aura:id="type" class="form-control" label="type" value="{!v.task.Type}" multiple="false">
                    <ui:inputSelectOption text="Call" label="Call" value="true" />
                    <ui:inputSelectOption text="Meeting" label="Meeting"   />
                    <ui:inputSelectOption text="Other" label="Other"   />
                    <ui:inputSelectOption text="Email" label="Email"   />
                </ui:inputSelect>
                <ui:inputTextArea class="form-control" aura:id="description" label="description" value="{!v.task.Description}" required="true" rows="5"/>
                <div style="margin-top:15px;">
                    <ui:button aura:id="addBtn" label="Save" labelClass="glyphicon glyphicon-plus" class="btn btn-success" press="{!c.save}" />
                </div>
            </div> 
        </div>
    </div>
</aura:component>

END:

I have the following line of code that produce the error I have pasted:

component.set("v.task", "");

If I comment the above line then I do not see the error again.

  action.setCallback(this, function(response){
       var state = response.getState();
        $A.log(response);
        if(state === "SUCCESS"){
            component.set("v.task", response.getReturnValue());
        }
        else if(state === "ERROR") {
            component.set("v.task", ""); // this line causing the stack size exceeded
        }
    });

This page has an error. You might just need to refresh it. Action failed: ui$inputSelect$controller$valueChange [Maximum call stack size exceeded] Failing descriptor: {ui$inputSelect$controller$valueChange}

Any idea what might be going on that line making the stack size exceeded?

Answer 1

Here is how I able to fixed my particular issue and I do not see any errors now.

       else if(state === "ERROR") {
            var emptyTask = component.get("v.task");
            emptyTask.Subject = "";
            emptyTask.Description = ""; 
            ......
            component.set("v.task", emptyTask);
        }

Answer 2

Here is another one way to fixed problem like this, especially when you have large object to clear and you don't want clear every field separate.

     var emptyTask = [{ sobjectType: 'Task' }];
     component.set("v.task", emptyTask);