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

@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)