1

This is my HTML:

<template>
    <lightning-button variant="base" label="Base" title="Looks like a link" onclick={handleSelect}></lightning-button>
</template>

And my Javascript:

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class SelectCountry extends NavigationMixin(LightningElement) {
    handleSelect(event) {
        console.log('event.target = ' + JSON.stringify(event.target, null, 4));
        console.log('event.currentTarget = ' + JSON.stringify(event.currentTarget, null, 4));
    }
}

I took it from this simple example from Salesforce.

My original code was much larger, that accounts for the imports and extends. I stripped it to the bare minimum.

Both target and currentTarget are empty. Why? The example shows that event.target.label should contain 'Base' when clicked, but target is just empty. event itself is filled with an enormous structure, but nothing that tells me what has been clicked (apart from X+Y coordinates).

Elsewhere I found people with the same problem due to locker service. I don't even know what that is, but in case my org is using it, I tried the recommended solution of using event.getSource().getElement().value, but I can't even access event.getSource():

Uncaught TypeError: event.getSource is not a function

Elsewhere I found that event.detail might work. Well, it's not empty or undefined, but it's not much use either. It contains 1.

5
  • 1
    try printing console.log(event.target.label); console.log(event.target.title); Commented Apr 20, 2020 at 14:27
  • Oh my God, that works. How is that possible? How can target be an empty structure, but contain elements? Commented Apr 20, 2020 at 14:31
  • event.target.label should work just fine see the playground Commented Apr 20, 2020 at 14:32
  • 1
    its not serializable into json because event.target is very huge payload plus it can be recursive. printing. individual fiedls would work. Have a look here stackoverflow.com/questions/11547672/… Commented Apr 20, 2020 at 14:35
  • Just lovely that stringify does not report this, but simply returns {}. Wonderful. Maybe I'm sounding sarcastic, but that's just because it cost me a few hours. Thanks for your help! Commented Apr 20, 2020 at 14:37

1 Answer 1

1

So the answer is, apparently, that although event.target seems empty, it isn't. I am baffled.

event.target looks like an empty structure, but querying things like event.target.label and event.target.title just returns values.

1
  • The Proxy[] object confuses a lot of people. Check out other answers here on SFSE for what the Proxy is and how it works. Regardless, as long as you're trying to access public attributes, it'll work as you expect. You just can't "debug" it.
    – sfdcfox
    Commented Apr 20, 2020 at 15:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .