lightning:recordEditForm creating two records

Question

I have a custom lightning component, in which using lightning:recordEditForm I'm creating a case record, This component is on EmailMessage object.

When I click on save it creates two case records, in success method I can see two record Ids, whereas my submit button is executing only once.

I'm not able to understand why it's creating two records. In my console log I can see payload getting executed twice.

Component:

<lightning:recordEditForm onsuccess="{!c.onSuccess}"
                                  aura:id="createCase"  
                                  objectApiName="Case" >

            <lightning:inputField fieldName="AccountId" ></lightning:inputField>

            <lightning:inputField fieldName="ContactId" />
            <lightning:inputField fieldName="ParentId" />

            <lightning:inputField fieldName="Status" />
            <lightning:inputField fieldName="Subject" />
            <lightning:inputField fieldName="Description" />  
            <lightning:button type="submit" label="Save" onclick="{!c.createCase}" />
        </lightning:recordEditForm>

Controller:

createCase : function(component,event,helper) {
        console.log(">>> createCase... "+component.find("createCase"));
        component.find("createCase").submit();
    },

    onSuccess : function(component, event, helper) {

        var payload = event.getParams().response;
         console.log(">>> payload... "+payload.id);
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": payload.id,
            "slideDevName": "related"
        });
        navEvt.fire();

    }

Answer 1

You are resubmitting the form on button click you don't need to call createCase() on button click it will automatically create the case you just have to set the type of button as submit and leave it

<lightning:recordEditForm onsuccess="{!c.onSuccess}"
                                  aura:id="createCase"  
                                  objectApiName="Case" >

            <lightning:inputField fieldName="AccountId" ></lightning:inputField>

            <lightning:inputField fieldName="ContactId" />
            <lightning:inputField fieldName="ParentId" />

            <lightning:inputField fieldName="Status" />
            <lightning:inputField fieldName="Subject" />
            <lightning:inputField fieldName="Description" />  
            <lightning:button type="submit" label="Save"  />
        </lightning:recordEditForm>