Setting left / right values does not update component

[matthewpomar]

I've added the DualSelect component to a wrapper component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

    <aura:attribute name="leftValues" type="Object[]" access="public" default="[]" />
    <aura:attribute name="rightValues" type="Object[]" access="public" default="[
           {
           'label': 'Annual Review',
           'value': 'Annual Review'
           },
           {
           'label': 'Initial Contact',
           'value': 'Initial Contact'
           },
           {
           'label': 'Application',
           'value': 'Application'
           }]" />
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />        

    <div class="slds">
        <div class="slds-box">
            <c:DualSelect fieldName="Skills" leftValues="{!v.leftValues}" rightValues="{!v.rightValues}" />
        </div>
    </div>
</aura:component>

({
    doInit : function(component, event, helper) {
    
    	var leftValues = component.get("v.leftValues");
    	
    	leftValues.push({
           'label': 'Annual Review',
           'value': 'Annual Review'
           });
		
		component.set("v.leftValues", leftValues);
    } 
})

The right side shows the 3 initial values OK, but the left side does not. If I inspect the leftSide attribute, the values are in there, but the component doesn't seem to know about them, or at least fails to update the UI with those values.

Do I have to fire an event to get them show up? If so, would you mind providing an example?

Thanks again!

[rapsacnz]

I'll see if I can fire up your example later today. If the right side is getting them, then it shouldn't be hard to get the left to detect that the list has changed - perhaps just call reinit on the left side list?

[matthewpomar]

Hi, I looked through your code, and I didn't see any events or methods that handled attribute data changing for left- or right-side items. It's entirely possible (even likely) I'm overlooking something.

It would seem there should be some kind of event I would need to fire after setting the left/right-side object[] values. But the only event that that comes close are tied to methods moveitems, moveComplete, and dragComplete.

I guess it would be helpful to know if this version of your component is useable as is, or does it need to be extended to handle setting the data and runtime via Javascript object arrays?

[matthewpomar]

I ended up going with the new Salesforce lightning:dualListbox component instead. Thanks.

[rapsacnz]

Just for completeness' sake, all you had to do was add a change handler to the ordered list to detect when it's values were updated:

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