Lightning Component - Get html button id in controller.js working in firefox, not in chrome

Question

In Salesforce Lightning - Onclick event on html button, I get button id in Firefox in controller and not in chrome. What will be the reason??

Component

   <div class="slds-modal__content slds-p-around--medium">
          <div align="center">
              <button class="slds-button slds-button--inverse" title="settings" onclick="{!c.hidePopup}" id="changePriceButton">
                 <c:svgIconSample svgPath="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#upload" class="slds-button--inverse slds-button__icon--left" category="action" size="large" name="Submit" />
                <span class="slds-assistive-text">Update Price</span> 
              </button>               
         </div>
   </div>

Controller.js

hidePopup : function(component, event, helper){
        console.log('buttonname>>>' +event.target.id);
        var buttonName = event.target.id;
        alert(buttonName);
    }

In Firefox: console output : buttonname>>>changePriceButton

In chrome console output : buttonname>>>

When I remove the <c:svgIconSample/> tag from the above code ie),

<c:svgIconSample svgPath="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#upload" class="slds-button--inverse slds-button__icon--left" category="action" size="large" name="Submit" />
                <span class="slds-assistive-text">Update Price</span> 

I am getting the HTML id in controller.

I have copied the SVG component code from https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/ and named the component as svgIconSample

When I inspected the DOM: In Chrome:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-button--inverse slds-button__icon--left" name="Submit"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#upload"></use></svg>

In FireFox:

<svg aria-hidden="true" class="slds-icon slds-icon--large slds-button--inverse slds-button__icon--left" name="Submit"><use xlink:href="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#upload"></use></svg>

Difference between chrome and firefox is there is an additional element in chrome xmlns:xlink="http://www.w3.org/1999/xlink" is appeared.

How to rectify it?

Answer 1

In your JS Controller, you should use event.currentTarget.id instead of event.target.id.

This is because when you click on your svg (the target), your click event isn't handled as there is no onclick handler on your svg tag. Then the event bubbles up to your button, which handles it and call your hidePopup method, becoming the currentTarget of your event.

Said simply as in this answer:

• target is the element that triggered the event (e.g., the user clicked on).
• currentTarget is the element that the event listener is attached to.

So when using event.target.id you're actually trying to get the id of your svg, which doesn't have any.

You can try clicking on your button outside of your svg (the button being both the target and currentTarget in this case), and your code works.

I didn't had a look on why it's working on Firefox, but here the issue is more like why it's working in Firefox, than why it's not in Chrome.

Additionally, you shouldn't use this svgIconSample component if your svg is part of the Design System. Instead, make use of the lightning:icon Base Lightning Component. This would look like something like this:

<lightning:icon iconName="utility:upload" size="large" alternativeText="Upload"/>