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?