# \[Bug\] text input contents initially scroll out of view

**URL:** <https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242>\
**Category:** UXP Plugin API\
**Tags:** ui, bug\
**Created:** [November 19, 2020, 3:46pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242 "2020-11-19T15:46:57Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [November 19, 2020, 3:46pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/1 "2020-11-19T15:46:57Z")

</div>

There’s something weird going on with text inputs that have a custom width and long text in it:

![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/d/d2e242460d6997ccfb444c13bb2255720622a02b.png)

I can then manually scroll to the left which gives the desired result:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/9/90d207cc0a832ad51fa2f823395001cc58798325.png)  
Afterwards, I can’t scroll any more which makes sense as there’s enough space for the text

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [November 19, 2020, 4:24pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/2 "2020-11-19T16:24:54Z")

</div>

I can’t say I’ve seen this particular behavior before. What OS/version are you on? What, if any, CSS are you applying to the control?

Also, try using sp-textfield – does it exhibit the same behavior for your case?

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [November 20, 2020, 11:55am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/3 "2020-11-20T11:55:23Z")

</div>

Not really any fancy styles:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/a/ab90f82ecdd990ab9f6bdcc63bf4e8e2be68e014.png)  
The input is inside a wrapper-div which has “position: relative”.

I’m on Windows 10 Pro.  
I’ll try to use sp-textfield later on, however, it won’t match the look of my UI probably - but if it’s customizable via css it might be fine.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [November 20, 2020, 12:14pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/4 "2020-11-20T12:14:28Z")

</div>

> [@kerrishotts](#):
>
> Also, try using sp-textfield – does it exhibit the same behavior for your case?

Happens to both unfortunately:

![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/9/9fedbf86a32ed92d61265844c5f8dc3faa4be659.png)

Also, is there any recommended way of using Spectrum Components with Typescript?  
It always gives me the error below…

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/b/bef8288a86728387c34607026fad105022c73b17.png)

It does compile I guess but I still wouldn’t want to have those errors in my code all the time.  
At least I assume that it’s related to Typescript, since I checked out the “UI-react-starter” project and the sp-tags don’t show any errors there.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [November 20, 2020, 12:41pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/5 "2020-11-20T12:41:54Z")

</div>

Also happens when I add "value=“112233445566778899” to the input in the KitchenSink example:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/4/4a2dfe6a9b00939a8e504d7553e9480e98a7a400.png)  
Looks like it isn’t related to my code or styling, but a bug instead.

---

<div class="post-metadata">

**Author:** ![ddbell](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ddbell/32/1030_2.png) [@ddbell](https://forums.creativeclouddeveloper.com/u/ddbell)\
**Post date:** [November 21, 2020, 5:01am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/6 "2020-11-21T05:01:01Z")

</div>

I just confirmed that this happens on my system too with my plugin with the sp-textfield. Placeholder works fine but not value.

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [January 18, 2021, 12:20am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/7 "2021-01-18T00:20:23Z")

</div>

@kerrishotts Are there already plans for fixing this bug?  
I think it can be very confusing for users when input fields are prepopulated with data and the text is scrolled out of the inputs.

While I’m at it, here are some more feature requests regarding inputs:

- support `HTMLInputElement.select()`
- support `HTMLInputElement.focus()`
- styleable placeholder (defaults to italic which can’t be changed)

---

<div class="post-metadata">

**Author:** ![DerHerrKohler](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/derherrkohler/32/1245_2.png) [@DerHerrKohler](https://forums.creativeclouddeveloper.com/u/DerHerrKohler)\
**Post date:** [March 9, 2021, 3:22pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/8 "2021-03-09T15:22:09Z")

</div>

@kerrishotts Any news on this? It’s still an annoying bug ☹

---

<div class="post-metadata">

**Author:** ![DerHerrKohler](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/derherrkohler/32/1245_2.png) [@DerHerrKohler](https://forums.creativeclouddeveloper.com/u/DerHerrKohler)\
**Post date:** [April 26, 2021, 9:46pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/9 "2021-04-26T21:46:39Z")

</div>

@kerrishotts any news on this? It’s a bug and it’s still annoying…

---

<div class="post-metadata">

**Author:** ![Alexandr\_Stroganov](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/alexandr_stroganov/32/2710_2.png) [@Alexandr\_Stroganov](https://forums.creativeclouddeveloper.com/u/Alexandr_Stroganov)\
**Post date:** [May 15, 2021, 10:52pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/10 "2021-05-15T22:52:17Z")

</div>

This code fixes a bug on Windows 10. ‘Test’ - `<sp-textfield>` element

```
   setTimeout (() => {document.getElementById ('test'). focus ()}, 200);
   setTimeout (() => {document.getElementById ('test'). blur ()}, 300);
```

---

<div class="post-metadata">

**Author:** ![lvilasboas-dti](https://avatars.discourse-cdn.com/v4/letter/l/f07891/32.png) [@lvilasboas-dti](https://forums.creativeclouddeveloper.com/u/lvilasboas-dti)\
**Post date:** [May 25, 2021, 4:57pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/11 "2021-05-25T16:57:53Z")

</div>

I confirm that @Alexandr_Stroganov 's hack works

---

<div class="post-metadata">

**Author:** ![AndreasResch](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/andreasresch/32/1423_2.png) [@AndreasResch](https://forums.creativeclouddeveloper.com/u/AndreasResch)\
**Post date:** [June 13, 2021, 9:52am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/12 "2021-06-13T09:52:30Z")

</div>

I tried it out and it works. However with the high timeout settings, the textfield ended up being select (blue background) which isn’t very nice looking. I reduced the timeout values to 1/10 and now it’s fine. Cheers.

```auto
setTimeout (() => {document.getElementById ("input_watermarkfile"). focus ()}, 20);
setTimeout (() => {document.getElementById ("input_watermarkfile"). blur ()}, 30);

```

---

<div class="post-metadata">

**Author:** ![Alexandr\_Stroganov](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/alexandr_stroganov/32/2710_2.png) [@Alexandr\_Stroganov](https://forums.creativeclouddeveloper.com/u/Alexandr_Stroganov)\
**Post date:** [June 13, 2021, 10:09am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/13 "2021-06-13T10:09:36Z")

</div>

Hi Andreas, thanks for your comment!

I lowered the latency settings and everything works fine on my computer. But I’m not sure if this will work for users with slower computers.

My colleague once tested a command that uses neural filters.  
A failure has occurred due to too little latency.

Therefore, where I use a delayed start, I do it with a margin.

---

<div class="post-metadata">

**Author:** ![AndreasResch](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/andreasresch/32/1423_2.png) [@AndreasResch](https://forums.creativeclouddeveloper.com/u/AndreasResch)\
**Post date:** [June 13, 2021, 10:13am UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/14 "2021-06-13T10:13:40Z")

</div>

Thanks for the feedback. I have an average PC and so I will leave it at those values for now. But if I should get any problems from users, I know where I might want to look.

Once Adobe gets around to fix this, I will remove it anyway. Cheers.

---

<div class="post-metadata">

**Author:** ![AndreasResch](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/andreasresch/32/1423_2.png) [@AndreasResch](https://forums.creativeclouddeveloper.com/u/AndreasResch)\
**Post date:** [June 19, 2021, 2:59pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/15 "2021-06-19T14:59:49Z")

</div>

I’ve run into a little problem with this hack. When the container div is hidden, the hack doesn’t work. And once I unhide the div, the textfield content is messed up. Any ideas how to get around that?

---

<div class="post-metadata">

**Author:** ![Alexandr\_Stroganov](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/alexandr_stroganov/32/2710_2.png) [@Alexandr\_Stroganov](https://forums.creativeclouddeveloper.com/u/Alexandr_Stroganov)\
**Post date:** [June 19, 2021, 3:21pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/16 "2021-06-19T15:21:20Z")

</div>

it makes sense to use delayed focus every time you show a div. Have you tried this option?

---

<div class="post-metadata">

**Author:** ![AndreasResch](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/andreasresch/32/1423_2.png) [@AndreasResch](https://forums.creativeclouddeveloper.com/u/AndreasResch)\
**Post date:** [June 19, 2021, 3:58pm UTC](https://forums.creativeclouddeveloper.com/t/bug-text-input-contents-initially-scroll-out-of-view/2242/17 "2021-06-19T15:58:58Z")

</div>

It sort of works - thanks. But there’s a short blue flashing of the text when it’s selected and exited, which is hacky as hell. Can’t wait until this one gets fixed.