Text inputs lose focus when panel is resized

Adobe XD UXP Plugin API
1

Steps to reproduce:

  • insert the cursor into a text input so it had focus;
  • resize XD window’s height until the panel displays its scrollbar;
  • Text input loses focus.

The same also happens if a text input gain focus when the panel already has the scrollbar: it loses focus when panel is high enough to show all contents.

Expected behavior:
Text inputs keep their focus regardless of panel’s or application’s size.

2

What version of XD is this?

This is a known bug in older versions; don’t know if they fixed it in recent versions.

The problem is that focus is lost when UXP switches the panel from non-scrolling to scrolling.

The workaround is to make the panel always scrolling.

/* always scrollable to avoid the transition
 * from scrollable to non-scrollable, which
 * loses the input state */
panel {
  height: calc(100vh - 100px);
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

@kerrishots discovered this for us some months back, and gave us the workaround.

But, yes, please fix for good, Adobe!

3

Both

54
54558×194 12.9 KB

and

25
25694×188 23 KB

thank you @cpryland, meanwhile I’ll try the workaround you’ve suggested.

4

Now it works.

My actual code:

container.style.position = "fixed";
container.style.top = 0;
container.style.bottom = 110;
container.style.overflowY = "scroll";

It seems it has also fixed the sticky footer issue.

Thank you @cpryland and @kerrishotts.

5

from What’s New for Developers in Adobe XD 24 (MAX Release) | by Kerri Shotts | Adobe Tech Blog

  • Fixed cases where focus could be lost when a container transitioned from and to scrollable overflow states (macOS only).

On Mac it keeps losing focus without the above workaround.

1 Like