JavaScript function failing after spring'18 release [closed]

Question

JavaScript 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')]);
        }
    }
 }

Answer 1

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")