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:
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:
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:
HTMLInputElement.select()
HTMLInputElement.focus()
@kerrishotts Any news on this? It’s still an annoying bug 
@kerrishotts any news on this? It’s a bug and it’s still annoying…
This code fixes a bug on Windows 10. ‘Test’ - <sp-textfield> element
setTimeout (() => {document.getElementById ('test'). focus ()}, 200);
setTimeout (() => {document.getElementById ('test'). blur ()}, 300);I confirm that @Alexandr_Stroganov 's hack works
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.
setTimeout (() => {document.getElementById ("input_watermarkfile"). focus ()}, 20);
setTimeout (() => {document.getElementById ("input_watermarkfile"). blur ()}, 30);
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.
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.
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?
it makes sense to use delayed focus every time you show a div. Have you tried this option?
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.