2

We have section in the app, which allows user to create/edit/remove option under a question, which will be displayed in Assessment.

I'm able to do following:

  1. Add new option

  2. Edit the option

  3. Delete the option

What is not working for us is, when the user clicks on edit icon and changes the options, clicks on cancel icon to revert back to old value; the old value is not being reflected in the view.

Steps to reproduce the issue:

  1. Add new Option "Hello world"
  2. Click on Edit icon, now change the text to "Test"
  3. Click on Cancel icon to revert back the changes, but it shows the new value "Test" not old value "Hello world".
  4. Printing the array which stores the options, shows us the old value only.

Application

<aura:application extends="force:slds">

    <aura:attribute name="answers" type="List"/>
    <aura:attribute name="showNewAnswerView" type="Boolean" default="false"/>
    <aura:attribute name="newAnswer" type="String"/>
    <aura:attribute name="selectedValue" type="String" />
    <aura:attribute name="oldValue" type="String" />
    <aura:attribute name="indexPos" type="Integer" />

    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media--center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
                        <lightning:icon iconName="standard:contact" size="xx-small" />

                    </span>
                </div>
                <div class="slds-media__body">
                    <h2>
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
                            <span class="slds-text-heading--small">Add Options</span>
                        </a>
                    </h2>
                </div>
            </header>

            <div class="slds-no-flex">
                <button class="slds-button slds-button--neutral" onclick="{!c.addOptions}">New</button>
            </div>

        </div>
        <div class="slds-card__body">
            <aura:iteration items="{!v.answers}" var="answer" indexVar="index">
                <div>
                    <aura:if isTrue="{!index == v.indexPos}">
                        <ui:inputText change="{!c.textChange}"  class="slds-input slds-size--1-of-2" value="{!answer}"/>

                        <a class="slds-p-around--xx-small" href="#" data-index="{!index}" onclick="{!c.cancelUpdateOption}">
                            <lightning:icon iconName="utility:refresh" size="xx-small"/>
                        </a>
                        <a class="slds-p-around--xx-small" href="#" data-index="{!index}" onclick="{!c.updateOption}">
                            <lightning:icon iconName="utility:check" size="xx-small"/>
                        </a>

                        <aura:set attribute="else">

                            {!answer} 
                            <a class="slds-p-around--xx-small" href="#" data-index="{!index}" onclick="{!c.editOption}">
                                <lightning:icon iconName="utility:edit" size="xx-small"/>
                            </a>
                            <a class="slds-p-around--xx-small" href="#" data-index="{!index}" onclick="{!c.removeOption}">
                                <lightning:icon iconName="utility:close" size="xx-small"/>
                            </a>
                        </aura:set>
                    </aura:if>
                </div>
            </aura:iteration>

            <aura:if isTrue="{!v.showNewAnswerView}">
                <span>
                    <div class="slds-p-around--xx-small">
                        <ui:inputText aura:id="optVal" value="{!v.newAnswer}" class="slds-input slds-size--1-of-2" />
                        <a class="slds-p-around--xx-small" onclick="{!c.closeOption}"><lightning:icon iconName="utility:refresh" size="xx-small"/></a>
                        <a class="slds-p-around--xx-small" onclick="{!c.addOption}"><lightning:icon iconName="utility:check" size="xx-small"/></a>
                    </div>
                </span>
            </aura:if>
        </div>

    </article>
</aura:application>

Controller

({
    addOptions : function(cmp,event,helper){
        cmp.set("v.showNewAnswerView",true);
        cmp.set("v.newAnswer","");      

    },
    textChange: function(cmp, event,helper) {  
        var target = event.getSource();  
        var txtVal = target.get("v.value");
        cmp.set("v.selectedValue",txtVal);

    },
    cancelUpdateOption : function(cmp,event){
        console.log("oldvalue::::",cmp.get("v.oldValue"));
        var answers = cmp.get("v.answers");
        console.log("Array of List:::",answers);
        answers[cmp.get("v.indexPos")] = cmp.get("v.oldValue");
        cmp.set("v.answers",[].concat(answers));
        cmp.set("v.indexPos",'');

    },
    updateOption : function(cmp,event,helper){
        var answers = cmp.get("v.answers");
        answers[cmp.get("v.indexPos")] = cmp.get("v.selectedValue");        
        cmp.set("v.answers",answers);
        cmp.set("v.indexPos",'');

    },
    editOption : function(cmp,event){
        var index = event.currentTarget.getAttribute("data-index");
        var answers = cmp.get("v.answers");
        cmp.set("v.oldValue",answers[index]);
        cmp.set("v.indexPos",parseInt(index));

    },
    removeOption : function(cmp,event,helper){

        var index = parseInt(event.currentTarget.getAttribute("data-index"));
        var originalIndex = index;
        var answers = cmp.get("v.answers");
        answers.splice(originalIndex,1);
        cmp.set("v.answers",answers);


    },
    closeOption : function(cmp,event,helper){
        cmp.set("v.showNewAnswerView",false);

    },
    addOption : function(cmp,event,helper){
        console.log("new Option::::",cmp.get("v.newAnswer"));
        var answers = cmp.get("v.answers");
        answers.push(cmp.get("v.newAnswer"));
        cmp.set("v.answers",answers);
        cmp.set("v.showNewAnswerView",false);


    },
})

NOTE : I see the same behaviour with Locker Service enabled and disabled.

1
  • ui:inputText does not work well in aura:iteration and values are not set properly. Try replacing is with a lightning:input
    – Kevan
    Nov 25 '17 at 19:54

Your Answer

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

Browse other questions tagged or ask your own question.