# Text inputs lose focus when panel is resized

**URL:** <https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374>\
**Category:** UXP Plugin API\
**Tags:** api-feedback\
**Created:** [October 29, 2019, 11:56am UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374 "2019-10-29T11:56:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaoloBiagini](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/paolobiagini/32/29_2.png) [@PaoloBiagini](https://forums.creativeclouddeveloper.com/u/PaoloBiagini)\
**Post date:** [October 29, 2019, 11:56am UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374/1 "2019-10-29T11:56:29Z")

</div>

_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.

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [October 29, 2019, 12:37pm UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374/2 "2019-10-29T12:37:44Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![PaoloBiagini](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/paolobiagini/32/29_2.png) [@PaoloBiagini](https://forums.creativeclouddeveloper.com/u/PaoloBiagini)\
**Post date:** [October 29, 2019, 1:19pm UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374/3 "2019-10-29T13:19:14Z")

</div>

Both

 ![54](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/359dd9ad3122aa6f9e169930c40e6ee43675d5fe.png)  
and

 ![25](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/1X/d8701c010c347c8df0c8375cd7378b3fdeb7526c.png)

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

---

<div class="post-metadata">

**Author:** ![PaoloBiagini](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/paolobiagini/32/29_2.png) [@PaoloBiagini](https://forums.creativeclouddeveloper.com/u/PaoloBiagini)\
**Post date:** [October 30, 2019, 9:54pm UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374/4 "2019-10-30T21:54:04Z")

</div>

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.

> [@Fixed position: fixed?](http://forums.creativeclouddeveloper.com/t/fixed-position-fixed/1181/25):
>
> Oooooooh… Ok, I think we have a bug here. The fix in XD 23, in particular, was related to the fact that position:fixed could go out-of-bounds of the plugin. Assuming no other positioned ancestor elements, elements that are fixed are positioned now based on the container (not the entire plugin panel) Where it does fall apart is when the overall plugin height is larger than the container – fixed positioning doesn’t work there. So for now, I’d use fixed positioning only in the case of trying to …

Thank you @cpryland and @kerrishotts.

---

<div class="post-metadata">

**Author:** ![PaoloBiagini](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/paolobiagini/32/29_2.png) [@PaoloBiagini](https://forums.creativeclouddeveloper.com/u/PaoloBiagini)\
**Post date:** [November 6, 2019, 9:13am UTC](https://forums.creativeclouddeveloper.com/t/text-inputs-lose-focus-when-panel-is-resized/1374/5 "2019-11-06T09:13:23Z")

</div>

from [What’s New for Developers in Adobe XD 24 (MAX Release) | by Kerri Shotts | Adobe Tech Blog](https://medium.com/adobetech/whats-new-for-developers-in-adobe-xd-24-max-release-5cee8e3eea6f)

> - 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.