Onchange Event Fires on Page Load in Salesforce Aura Lightning Components (lightning:inputField)

This behavior is expected in Salesforce Aura Lightning components.When field data loads from the API, the component initializes field values, which triggers the onchange event.

The best practice is to design your onchange handler so it correctly distinguishes between initialization-triggered changes and user-triggered changes.

Recommended Approach: Use onload to Track Initial Field State

Add an onload event handler to your lightning:recordEditForm to capture the initial record state. In the onPicklistChange function, compare the new value against the stored initial state. If the values match (meaning no user change has occurred), do not show the Save button.
How it works:

1. On component load, the onload handler fires and stores a snapshot of the current record fields (using JSON.parse(JSON.stringify(...))) into a component attribute called currentRecord.
2. When onchange fires, the handler retrieves the field name and the new value from the event source.
3. If the stored field value is null and the new value is an empty string, this is the initialization trigger — no user action has occurred, so displaySave is not set to true.
4. If the field value has genuinely changed from the stored initial value, displaySave is set to true and the Save button appears.
5. On successful save (onSuccess), displaySave is reset to false.

Key changes from the original setup:

• Add onload="{!c.onload}" to the lightning:recordEditForm component.
• Add a currentRecord attribute of type Object to track field values.
• Update onPicklistChange to compare the incoming value against the stored initial record state before deciding to show the Save button.
• Add the onload function to the JS Controller to capture the initial record fields.
  
  

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="displaySave" type="boolean" default="false" description="Displays Save button if changed"/>
    <aura:attribute name="currentRecord" type="Object"/><!--Added Attribute to track-->
    
    <lightning:recordEditForm aura:id="recordEditForm"
                              recordId="{!v.recordId}"
                              objectApiName="Opportunity"
                              onsuccess="{!c.onSuccess}"
                              onload="{!c.onload}"
                              ><!--Added onload onload="{!c.onload}"-->
                <lightning:messages />
                <lightning:inputField fieldName="Custom_Picklist__c" aura:id="picklistField" onchange="{!c.onPicklistChange}"  />           
                <aura:if isTrue="{!v.displaySave}">
                    <lightning:button variant="brand" label="Save" type="submit"/>
                </aura:if> 
    </lightning:recordEditForm>
</aura:component>

JS Controller

({
    onPicklistChange : function(component, event, helper)
    {
        let fieldName = event.getSource().get("v.fieldName") ; 
        let newValue =  event.getSource().get("v.value") ; 
        let currentRecord = component.get("v.currentRecord") ; 
        if(currentRecord[fieldName].value ==null && newValue == ""  )  { //we know the value is blank from the UI 
            currentRecord[fieldName].value = newValue ; 
            component.set("v.currentRecord", currentRecord); 
        }
        else{
        component.set("v.displaySave", "true");  
        }
    }, 
    onSuccess: function(component, event, helper)
    {
        component.set("v.displaySave", false);
    } ,
    onload: function(component, event, helper)
    {
        if(event.getParam("recordUi").record){
            component.set("v.currentRecord", JSON.parse(JSON.stringify(event.getParam("recordUi").record.fields)));
        }
    }
})