Uui-button click event inside uui-box

Anyone know how to handle the click event on a uui button?

                <uui-button pristine="" label="Button" compact=""

                @click="${(event: Event) => this.#addAnswer(event)}"><uui-icon name="icon-badge-add"></uui-icon></uui-button>

    #addAnswer(event: Event) {
        event.stopPropagation();
        alert("add answer");

    }

the addAnswer never gets called

Try adding

` @click=${this.#addAnswer}>

tried that allready, same result.

It must be related to where it is,

clicking Button!! does not work, but clicking Button fires the event.

looks like it is because the controls are in a uui-box, if I move out of the box then the event fires correctly?

Hi @huwred, what you have shared looks spot on, so I would assume it’s the surroundings that have the problem. Could you share the whole element?

Notice @click only works in HTML rendered as part of a Lit HTML template literals(The render method of a lit element)

If you are in doubt you can look around our source code to see a lot of similar implementations.
This Article also brings an example with a click event listener, maybe you can spot the problem by looking at that?

1 Like

I’m beginning to think it is because they are dynamically rendered by a sub routine, buttons declared directly in the render function work as expected.

All sorted :slightly_smiling_face:

It was my renderring, I had copied some code that concatenated a load of stuff before returning the html, seems it was that causing the issue, I refactored it all and now working as expected.

1 Like