0

I have implemented the lightning:dualListbox in my component.But when I searched 2nd time in the searchbox the values that are selected in the 1st time is vanished from the selected box. below is my code:

DualListBoxComponent.cmp:

<aura:component controller="CasesLabelsController" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
    <!--Declare Event Handlers-->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" description="Call doInit function on component load to get picklist values"/>
     <aura:handler name="change" value="{!v.term}" action="{!c.search}" />
    <!--Declare Attributes-->
    <aura:attribute name="GenreList" type="List" default="[]" description="Labels Picklist Values"/>
    <aura:attribute name="selectedGenreList" type="List" default="[]" description="Selected Labels Picklist Values"/>
    <aura:attribute name="requiredOptions" type="List" default="[]"/>
    <aura:attribute name="term" type="String" />
    <!--ui:button label="{!v.recordId}"/-->     
    <lightning:input type="text" value="{!v.term}" placeholder="Search" />
    <div class="slds-m-around_xx-large">
        <lightning:dualListbox aura:id="selectGenre"
                               name="Genre"
                               label="Edit Labels"
                               sourceLabel="Available Labels"
                               selectedLabel="Selected Labels"
                               options="{!v.GenreList}"
                               value="{!v.selectedGenreList}"
                               onchange="{!c.handleGenreChange}"/>
        <br/>
        <lightning:button label="Save Labels" onclick="{!c.saveLables}" />
    </div>
</aura:component>

DualListBoxController:

({
    doInit: function(component, event, helper) {
        var action = component.get("c.getPiklistValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
               // alert(result);
                var plValues = [];
                for (var i = 0; i < result.length; i++) {
                    plValues.push({
                        label: result[i],
                        value: result[i]
                    });
                }
                component.set("v.GenreList", plValues);

            }
        });
        $A.enqueueAction(action);
        //this.search(component);

        var action2 = component.get("c.getSelectedLabels");


        var selectedRecordId = component.get("v.recordId");
        //alert('Selected recId = '+selectedRecordId);
        action2.setParams({ 
            "selectedRecId": selectedRecordId
        });
        action2.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result2 = response.getReturnValue();
                var selValues = [];
                for (var j = 0; j < result2.length; j++) {
                    selValues.push(result2[j]);
                }
                component.set("v.selectedGenreList", selValues);
            }  
            else{
                alert('error');
            }
        });
        $A.enqueueAction(action2);


    },
     search: function(component) {
        // Search term
        var term = component.get("v.term");
        // Show all when no filter, or when filter matches label or value
         component.set("v.GenreList",
                      component.get("v.GenreList")
                      .filter(
                          item => !term || 
                          item.value.match(term) || 
                          item.label.match(term)));


    },

    saveLables : function(component, event, helper) {
        //save the labels
        var selectedValues = component.get("v.selectedGenreList");
        console.info('>>>>>selectedValues = '+selectedValues);
        var action3 = component.get("c.saveLabels");

        var selectedRecordId = component.get("v.recordId");
        action3.setParams({ 
            "selectedLabels": selectedValues,
            "selectedRecId": selectedRecordId
        });
        action3.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS"){
                var result4 = response.getReturnValue();

                var sMsg = 'Labels successfully saved \n';
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    mode: 'sticky',
                    message: sMsg,
                    type : 'success'
                });
                toastEvent.fire();
            }  
            else{
                alert('error');
            }
        });
        $A.enqueueAction(action3);
    },

    handleGenreChange: function (component, event, helper) {
        //Get the Selected values   
        var selectedValues = event.getParam("value");

        //Update the Selected Values  
        component.set("v.selectedGenreList", selectedValues);
    },

    getSelectedGenre : function(component, event, helper){
        //Get selected Genre List on button click 
        var selectedValues = component.get("v.selectedGenreList");
        console.log('Selectd Genre-' + selectedValues);
    }
})
  • 1
    Please make sure to use the {} tool or select and hit Ctrl-K to format a code block. No one will be able to read your code to help you otherwise; I've fixed it this time. – David Reed Dec 27 '18 at 12:31
2

Your search function is destructive.

     component.set("v.GenreList",
                  component.get("v.GenreList")
                  .filter(
                      item => !term || 
                      item.value.match(term) || 
                      item.label.match(term)));

Here, you overwrite your components v.GenreList attribute each time a search is performed, starting not from the original list you sourced in doInit but from the previously-filtered list. This means your list will get smaller and smaller each time a search is performed, but will never get back terms that are filtered out from earlier searches.

You need to store the original, complete GenreList that you get in doInit and filter that list each time a search is performed, so that you retain a constant set of the complete data.

  • @David...Thanks for your comment,can you ping me some sample code. – SATYENDRA CHOUBEY Dec 27 '18 at 12:45
  • I don't have any sample code, but even if I did, SFSE is not really a site for exchanging code. Take a quick swing through the Help Center to learn what you can expect here. I'm happy to expand on the solution above but I can't write the code for you. – David Reed Dec 27 '18 at 12:46

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