[SalesForce] How to clear a selected onchange value from an aura component on reload

I have an aura component with 3 dropdowns which are dependent on each other.
Dropdown 1 is loaded on init.
Dropdown 2 is loaded on a selection in 1.(image below blue section 1)
Dropdown 3 is loaded on a selection in 2.(image below blue section 2)

When I make a selection in 2, in the onchange event sets the selected option and then loads 3, which is correct. The problem comes in now when I change the selection in 1, it refreshes 2, but it doesn't clear the selected item, which causes problems because it doesn't fire the onchange event to reload 3. (see blue section 3 in the image).

How do I clear the selected value of 2 (the Frequency selection)? I've tried setting it to null in the onchange event from 1, but it doesn't seem to have any effect as it stays selected. I need Dropdown 2 to revert to the 'Select a Period Frequency' label.
enter image description here

This is my complonent:

<aura:if isTrue="{!empty(v.issue.Name)}">
    <div class="slds-form-element__row">
        <div class="slds-form-element slds-size_1-of-2">
            <lightning:combobox name="issuesList" label="Select Issue" placeholder="Select an Issue" options="{!v.issues}" onchange="{!c.selectIssue}"/>                    
        </div>
    </div>
</aura:if>      

<aura:if isTrue="{!not(empty(v.issue))}">
    <div class="slds-form-element__control">
        <div class="slds-form-element__row">
            <div class="slds-form-element slds-size_1-of-2">
                <lightning:combobox name="periodFreqs" label="Statement Period Frequency" placeholder="Select a Period Frequency" options="{!v.periodFreqs}" onchange="{!c.selectFreq}"/>                    
            </div>
            <div class="slds-form-element slds-size_1-of-2">
                <aura:if isTrue="{!v.selectedFreqValue != null}">
                    <lightning:combobox name="periodoptions" label="Periods" placeholder="Select a Period" options="{!v.periodoptions}" onchange="{!c.selectPeriod}"/>                    
                </aura:if>
            </div>
        </div>
    </div>
</aura:if>

And my controller:

selectFreq: function (component, event, helper) {
    var selectedOptionValue = event.getParam("value");
    component.set("v.selectedFreqValue", selectedOptionValue);
    helper.loadPeriods(component);
},

selectIssue: function (component, event, helper) {
    var selectedOptionValue = event.getParam("value");
    component.set("v.issue.Id", selectedOptionValue);
    component.set("v.issueid", selectedOptionValue);
    component.set("v.periodoptions", null);
    component.set("v.selectedPeriodValue", null);
    helper.loadFrequencies(component);
},

And the helper code for loading the frequencies:

loadFrequencies : function(component, event, helper) {
    // Retrieve the issue and proceed if it is not null
    var vissueid = component.get("v.issueid");
    var vaccount = component.get("v.account");

    var action = component.get("c.generateFrequencyList");
    var doaction = false;
    if(vissueid != 'undefined' && vissueid !=null){
        // Prepare the action to load the record
        action.setParams({
            "issueid": vissueid,              
            "account": vaccount              
        }); 

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var perOption = response.getReturnValue();
                var periodFreqs = [];
                if(perOption.length > 0){
                    for (var i = 0; i < perOption.length; i++){
                        var fOption = perOption[i].toString();
                        var item = {
                            "label": fOption,
                            "value": fOption,
                        };
                        periodFreqs.push(item);                            
                    }
                }
                component.set("v.periodFreqs", null);
                component.set("v.periodFreqs", periodFreqs);
                component.set("v.selectedFreqValue", null);
            }
            else {
                var errors = response.getError();
                var toastMessageDetail = 'Unknown error'; // Default error message
                // Retrieve the error message sent by the server
                if (errors && Array.isArray(errors) && errors.length > 0) {
                    toastMessageDetail = errors[0].message;
                }
                // Display the message in the console
                console.log(toastMessageDetail);   

                // Display friendy error to user                
                this.displayExceptionToast(toastMessageDetail);  
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);
    }
},

And lastly the server side controller code:

@AuraEnabled
public static List<string> generateFrequencyList(string issueid, string accountid){

    Set<String> periodFreqs = new Set<String>();
    string frequery = 'Select Frequency__c From Income__c Where Issue__c =: issueid ' +
        ' and Income_Type__c = \'Investment Statement\'';

    if(accountid != null){
        frequery += ' and Account__c =: accountid ';
    }
    frequery += ' group by Frequency__c order by Frequency__c';
    List<AggregateResult> incomes = (database.query(frequery));

    for(AggregateResult aggr:incomes){ 
        periodFreqs.add((String)aggr.get('Frequency__c'));        
    }
    list<string> freqs = new list<string>(periodFreqs);
    return freqs;
}

Best Answer

You have to assign an aura:id to the second combo-box like below.

 <lightning:combobox aura:id="periodFreqs" name="periodFreqs" label="Statement Period Frequency" placeholder="Select a Period Frequency" options="{!v.periodFreqs}" onchange="{!c.selectFreq}"/>   

And in the Controller find this aura id and set the value to null.

selectIssue: function (component, event, helper) {
var selectedOptionValue = event.getParam("value");
component.set("v.issue.Id", selectedOptionValue);
component.set("v.issueid", selectedOptionValue);
component.set("v.periodoptions", null);
component.set("v.selectedPeriodValue", null);
helper.loadFrequencies(component);
// Line to be added
component.find('periodFreqs').set("v.value", null);
},

this would reset your value in the second combo-box.

Related Topic