Console.log error when inside of a handler on an anchor

Adobe XD UXP Plugin API
1

I’m getting an error when calling console.log() and it seems like the only difference is that it’s being called inside of an event handler on an anchor. If you use a span there is no error.

Example:

var messageLabel = "Messages";
var buttonStyle = {backgroundColor:"none", border:"2px solid #888888", paddingLeft:"4", paddingRight:"4", marginRight:"10", borderRadius: "10px", opacity:1, fontSize:"10px", fontWeight:"bold", color:"#686868"};
h("a", { style: buttonStyle, padding: "6px 6px", width: 180, opacity: 0, title: "Click to display messages in the console", onclick(e) { messageLabelClickHandler(e) } }, messageLabel+":");

function messageLabelClickHandler(event) {
   console.log("heellloooo");
}

Causes the following error:

Plugin TypeError: Cannot read property 'toString' of null
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:550:1311)
    at h (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:262:553)
    at e (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:262:209)
    at i (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:262:1057)
    at dispatchNativeEvent (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:262:2075)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-2.2.0/build/modules_gen/domjs/src/js/domjs_scripts.js:238:6926)
2

It looks like this will happen any time you click an <a> without a properly formed href value – whether or not you have your own click handler function attached. I’ve filed an internal bug to see if we can resolve that.

3

@peterflynn
I think the problem here might be that this is using an “inline” onclick handler. To my knowledge, inline JS (and therefore also event handlers) aren’t (yet) supported in plugin dialogs and events need to be attached from the “real” script (i.e. by using element.addEventListener or something similar).

I don’t know enough about how the h() function works, but it looks like it’ll add inline-JS here, meaning it wouldn’t be supported…

4

I can reproduce the error without even attaching an event handler – it’s a problem specific to the <a> tag.

Attaching an inline event handler seems to work ok as long as you do it programmatically so you can point set its value to an actual JS function object. Inlining JS code as a string via innerHTML definitely will not work.

1 Like
5

h() as typically defined does not use inline HTML to assign event handlers – it’ll attach directly to onclick or similar, which is supported. In short, it’s equivalent to:

const a = document.createElement("a");
a.onclick = () => doSomething();

Just like the browser, this is an alternative to using addEventListener, although I prefer the latter (since you can attach more than one handler per event).