What event to listen for for input change on text field

Adobe XD UXP Plugin API
1

I have a input change handler setup on a panel but I’d like to get an event for each key press. The docs say only change is supported. Is this still true?

2

It looks like keydown works on Mac (not tested on Windows). There seems to be a conflict with change events though. If I set the value to something else change event will change it back (on Mac). I’ve refactored so that any changes happen in the change event so I guess it is ok for now. But haven’t tested on Windows. It could be different.

3

This is what I am using on the plugin I’m currently making:

filterInput.addEventListener('keydown', (event) => {
    switch(event.key) {
        case "ArrowDown":
           // do stuff
            break;
        case "ArrowUp":
           // do stuff
            break;
        default:
            // since keyup is not supported add delay;
            clearTimeout(keydownDelay);
            keydownDelay = setTimeout(function(){
                filterByName(filterInput.value);
            }, 500);
            break;
      }
});

Here is a demo: https://twitter.com/mightyalex/status/1244022536301674496

1 Like