5

enter image description hereJavaScript function failing after spring'18 release.

event.currentTarget.id
event.target

lightning component

<aura:component implements="force:appHostable" access="global">

<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
    <div class="slds-lookup__menu slds-hide" role="listbox" aura:id="SObjectList" onmouseover="{!c.handlemouseover}" onblur="{!c.handleblur}">
        <ul class="slds-lookup__list" role="presentation">
            <aura:iteration items="{!v.sobjectList}" var="record" indexVar="i">
                <li class="slds-lookup__item">
                    <a id="{!record.Id}" data-index="{!i}"  href="" role="option" value="{!record.Name}" onmousedown="{!c.selectSObject}">
                        {!record.Name}
                    </a>
                </li>
            </aura:iteration>
        </ul>
    </div>
</div>

js Controller

selectSObject:function(cmp,event){
    var selectedRecord = '';
    var selectedId     = '';
    var sobjectlist = cmp.get('v.sobjectResponseList');
    if(typeof event.target == "undefined") {
        selectedRecord  = cmp.get('v.selectedValue');
        selectedId      = cmp.get('v.selectedId');
    }
    else {
        console.log('i can see this log');
        //failure is here
        selectedRecord = event.target.value;
        console.log('i don't see this log');
        console.log(event.target.id);
        selectedId      =   event.target.id;
        if(cmp.get('v.showField')!= null && cmp.get('v.showField') !== '' && typeof cmp.get('v.showField') != "undefined"){
            cmp.set('v.selectedRecord',cmp.get('v.sobjectList')[event.target.getAttribute('data-index')]);
            cmp.set('v.additionalInfo',cmp.get('v.selectedRecord')[cmp.get('v.showField')]);
        }
    }
 }

closed as unclear what you're asking by glls, Santanu Boral, battery.cord, Himanshu, Raul Feb 12 '18 at 21:14

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • @glls added my console logs. It is a lookup component, the code which I have added here is just a part of it. Previously it was working fine. I didn't receive any error in past one year. I see error since yesterday as shown in the picture. – Venky Feb 11 '18 at 17:23
  • 1
    Sine locker service has been further enforced, you will have to use event.getSource() to fetch attribute values I believe – glls Feb 11 '18 at 17:54
  • @Venky HTMLAnchorElement does not support a value property according to spec. Mohith's solution to use a data attribute to pass the value would be the right approach. On locker service part, we should add some error handling for invalid attributes. I just filed a bug for it(W-4701252) – Ravi Jayaramappa Feb 12 '18 at 19:27
3

Looks like there is no attribute "value" on the anchor tag .

Hence I think locker code is doing some funky stuff .Here is how i would change your code and see if this works .

<aura:component implements="force:appHostable" access="global">

<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
 <div class="slds-lookup__menu slds-hide" role="listbox" aura:id="SObjectList" onmouseover="{!c.handlemouseover}" onblur="{!c.handleblur}">
    <ul class="slds-lookup__list" role="presentation">
        <aura:iteration items="{!v.sobjectList}" var="record" indexVar="i">
            <li class="slds-lookup__item">
                <a id="{!record.Id}" data-index="{!i}"  href="" role="option" data-value="{!record.Name}" onmousedown="{!c.selectSObject}">
                    {!record.Name}
                </a>
            </li>
        </aura:iteration>
    </ul>
 </div>
</div>

Notice instead of value on the anchor tag i used a custom data attribute called data-value .

Now in the controller code lets change how we extract the value

selectSObject:function(cmp,event){
var selectedRecord = '';
var selectedId     = '';
var sobjectlist = cmp.get('v.sobjectResponseList');
if(typeof event.target == "undefined") {
    selectedRecord  = cmp.get('v.selectedValue');
    selectedId      = cmp.get('v.selectedId');
}
else {
    console.log('i can see this log');
    //fixed this line
    selectedRecord = event.target.getAttribute("data-value");
    console.log(event.target.getAttribute("data-value"));
    selectedId      =   event.target.id;
    if(cmp.get('v.showField')!= null && cmp.get('v.showField') !== '' && typeof cmp.get('v.showField') != "undefined"){
        cmp.set('v.selectedRecord',cmp.get('v.sobjectList')[event.target.getAttribute('data-index')]);
        cmp.set('v.additionalInfo',cmp.get('v.selectedRecord')[cmp.get('v.showField')]);
     }
   }
}

Notice i have used below lines to get attribute values

event.target.getAttribute("data-value")

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