[Bug] text input contents initially scroll out of view


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


I can then manually scroll to the left which gives the desired result:
Afterwards, I can’t scroll any more which makes sense as there’s enough space for the text

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?

Not really any fancy styles:
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.

Happens to both unfortunately:


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

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.

Also happens when I add "value=“112233445566778899” to the input in the KitchenSink example:
Looks like it isn’t related to my code or styling, but a bug instead.

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