`autofocus` on Windows

Adobe XD UXP Plugin API
1

Issue

On Windows, there appears to be some sort of racing condition sometimes stealing focus from elements with the attribute autofocus="autofocus". This leads to the element inconsistently being selected or not when running the plugin. This does not occur on macOS.

Steps to reproduce

  • run the code listed as [Listing 1], using the xd-dialog-helper, which is installable with npm install xd-dialog-helper
  • run the plugin in Adobe XD on Windows multiple times (inconsistency, sometimes it works, sometimes it doesn’t).

Expected Behavior

On Windows, the button with the attribute (in the example, okButton), should consistently have focus when the dialog opens. It should therefore match the behavior on macOS, or, since @kerrishotts already confirmed it is a bug (see Additional Information below), the bug should be fixed :wink:

Actual Behavior

The button sometimes has focus and sometimes, it doesn’t when the dialog gets opened on Windows.

Additional information

I had already discussed this (a few months ago, didn’t get to writing the bug report until now :laughing:) with @kerrishotts via Slack, who had the idea that it could be a racing condition and confirmed:

So on my VM, it looks like it’s intermittent – sometimes it focuses the button, and sometimes it focuses the select – no rhyme or reason. Feels like a race condition on the autofocus handling.
[…]
It’s a bug. macOS doesn’t have this behavior, and we didn’t intentionally change the focusing behavior for dialogs. So feel free to raise on the forums and we can go from there.
– (@kerrishotts in a DM on Slack)

Known Workarounds

Replace okButton.setAttribute('autofocus', 'autofocus'); with

setTimeout(() => {
  okButton.focus();
}, 200);

Listings

[Listing 01]

const dialogHelper = require('xd-dialog-helper');

await dialogHelper.showDialog('my-dialog', 'Dialog', [
    { id: 'text', type: dialogHelper.types.TEXT_INPUT, label: 'Some input field' }
  ], {
  onBeforeShow: () => {
    const okButton = document.getElementById('lorem-main-dialogHelperBtnOk');
    okButton.setAttribute('autofocus', 'autofocus');
  }
});
1 Like