Apologies if this has been discussed here before. I did a search for “textfield” in the forum and didn’t find anything.
I want to make it so users can edit their sp-textfield entry after they click elsewhere on the plugin and the textfield loses focus.
The code I’m using is:
<sp-textfield type="text" placeholder="Enter something..."></sp-textfield>
Using this code, when I click back on the textfield to make it the focused element, all the text disappears, and the user has to retype it instead of being able to edit it.
If I remove the placeholder attribute (code below), then the original text becomes editable.
<sp-textfield type="text"></sp-textfield>
However, this is not ideal since the placeholder attribute is useful in helping the user to know what to type into the textfield.
Additionally, this is not an issue for an sp-textfield element with “type=number” as in the example below:
<sp-textfield type="number" placeholder="Enter a number..."></sp-textfield>
In this case, even with the placeholder present, the number entered in the textfield remains editable even after a de-focus > re-focus cycle of the sp-textfield element
This appears to be a Windows-only bug. On the MacBook Air that I use for testing the sp-textfield element is editable even with the placeholder attribute present.
Hi Tony,
they should call it <sp-minefield> 
Joking aside, I would say that it’s the other way around: I think the placeholder disappearing should be the expected behaviour (isn’t this what happens on the web, typically?) If I understand correctly how you’ve stated the problem.
In case you want to pre-populate text fields, you can always set their value attribute, either directly on the tag or later:
const width = document.querySelector("#width");
width.setAttribute("value", "1000");
Maybe I’m not understanding your reply, @DavideBarranca, but the problem is not that the placeholder disappears. The problem is that the user’s text in the textfield cannot be edited on Window because when the user clicks on it to edit it, the text they previously typed disappears. So, they have to type it all again instead of just doing a simple edit.
Oh now I see what you’re saying:
- Pristine Textfield with a Placeholder: user clicks, the Placeholder disappears (all good)
- Textfield already filled with text (not a Placeholder): the user focuses on the element to edit the text, and everything disappears (definitely wrong!)
Correct @DavideBarranca. Additionally, if placeholder="whatever" is omitted from the element’s HTML, the text is now editable as expected. And, this is only a problem if the sp-textfield is type="text".
type="number" textfields are appropriately editable.