Keyboard Events on panel UI globally

Adobe XD UXP Plugin API
, ,
1

Hey folks :wave:

I am developing a plugin for Adobe XD and I was looking to give keyboard shortcuts to the user to interact with plugin panel UI for the tool I am developing inside it. I was hoping to use arrow keys, delete, and others to invoke certain action inside the panel UI so users don’t have to click a lot.

I read the XD Plugin API document but I see the keydown event support is for inputs and buttons only. Is there any other workaround or this is coming in near future as a feature.

The feature can be adding event support to window.addEventListner so on plugin dialogue or panel can have global event listener available for events this will help a lot of plugin developers to deliver creative tools workaround and the user also find it helpful for the plugins with a lot of interactions.

Know your thoughts.

1 Like
2

One way that I always do it (e.g., in my Text Toolbox plugin that uses keyboard shortcuts in a dialog) is to have a hidden <input> element (that’s focused by being the first input element!) in the dialog/panel. This way, I can bind keydown on that input element.

You might have to deal with “refocusing” using something like elem.focus() in case a user focuses some other element in the mean time, though.

I hope this helps,
Best,
Pablo

1 Like
3

Thanks :pray: for the workaround, this will work like charm with a bit of refocusing here and there :wink:

1 Like