0

I have an aura component application in my community. It's a gridview of cases that filters on various attributes, dates, statuses and a text field that filters by case number. I have a new task to add a reset button that has me pulling out what little hair I have left. When change the case number input and click the reset button the first time, it clears the value and reloads the gridview as expected. But the second time, the grid resets, but the case number input field does not clear.

I'll try to include as much relevant code as possible.

This is the relevant part of the main gridview component.

<aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>     
    
      <div class="slds-col slds-size_2-of-6 .slds-align-top" style="padding-top:2%">
            <c:SearchBarCmp aura:id="SearchBarCmp"/>
      </div>    

        <div class="slds-col slds-align-bottom slds-float_left slds-p-top_small">
            <lightning:button variant="brand" label="Reset" name="ResetButton" title="Clear filters" onclick="{!c.clearFilters }"/>
        </div>

This is the clear filter code from the controller.

    clearFilters : function ( component, event, helper ){
    helper.elementShow(component.find("listSpinner"));
    window.sessionStorage.removeItem('searchVars');
    var textBox = component.find("SearchBarCmp");
    textBox.searchKeyClear(textBox);

    component.set("v.storeSearchKey", null);

    var action = component.get("c.getCases");
    action.setParams({
        "searchKey": null
        
    });

    action.setCallback(this, function(result) {
        if (result.getState() === 'SUCCESS') {
            var records = result.getReturnValue();
            for (var i = 0; i < records.length; i++) {
                var row = records[i];
                if (row.Support_Product__c) row.ProductName = row.Support_Product__r.Name;

            }
            component.set("v.allCases", records);
            component.set("v.maxPage", Math.floor((records.length + 9) / 10));
            component.set("v.pageNumber", 1);
            this.renderPage(component);
        } else if (result.getState() ==='ERROR') {
            console.log('failed case retrieval... ');
            var err = action.getError();
            if (err) {
                console.log('errors: ' + JSON.stringify(err));
            }
        }
    });        
    $A.enqueueAction(action);
    
}

Here's the SearchBarCmp

    <aura:attribute name="searchText" type="string" default="" description="store input value"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <aura:method name="searchKeyClear" action="{!c.searchKeyClear}">
            <aura:attribute name="clear" type="boolean" default="false"/>
    </aura:method>
    
    <input type="text" name="SearchBarText" class="form-control" onchange="{!c.searchKeyChange}" value="{!v.searchText}" 
    placeholder="Search" />

Here's the SearchBarCmp relevant controller code

searchKeyClear: function (component, event, helper) {
    var parameterList = event.getParam("arguments");
    component.set("v.searchText", null);
    var myEvent = $A.get("e.c:SearchKeyChange");
    myEvent.setParams({"searchKey": ""});
    myEvent.fire();
}

I did try to change the input in SearchBarCmp from a standard input to a lightning:input like this

 <lightning:input type="text" name="SearchBarText" class="form-control" onchange="{!c.searchKeyChange}" value="{!v.searchText}" 
    placeholder="Search" />

It clears each time, but it never activated the searchKeyChange event. So I added a change handler.

<aura:handler name="change" value="{!v.value}" action="{!c.searchKeyChange}" />

but that didn't execute the searchKeyChange either

Any and all suggestions or advice would be appreciated.

0

Salesforce support was able to give me the call to completely refresh the view rather than going through the individual components. By adding this to the reset button, I was able to refresh the entire view, then activate the other reset functions. Salesforce support has much improved.

$A.get('e.force:refreshView').fire();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.