Click event not being captured for input box (sp-textfield)

I’m trying to do separate things for “focus” and “click” events for my input box, i.e. sp-textfield element.


<sp-textfield quiet type="number" id="inputHEIGHT" ></sp-textfield>

The “focus” JS is:

document.getElementById("inputHEIGHT").addEventListener("focus", () => {console.log(document.getElementById("inputHEIGHT").value)})

and this properly logs the input field’s value.

However the “click” JS is:

document.getElementById("inputHEIGHT").addEventListener("click", () => {console.log(document.getElementById("inputHEIGHT").value)})

and it logs nothing. In other words, clicking on the input box doesn’t trigger the click event that I can tell.

Am I doing something wrong or does the “click” event not work with sp-textfield elements?

Just tried it out, I can confirm this.
I assume that this is related to the somewhat weird way inputs are currently rendered in UXP.
This is not spectrum-specific, the behavior is the same for native input fields. Seems like the underlying input does not bubble up mouse events. More specifically, this happens only on the main area of the input (in the middle), there are still some areas on the edge (where the padding is), which pass along mouse events correctly.

Not much you can do I guess, since a wrapper around it doesn’t help either. (Events bubble from the inside to the outside)