On first render I have empty <sp-textfield/>. I start typing and all seems fine. Then I delete text in the field, invalid state changes, input turns red. Then, when I start typing again, first character is lost, because it always gets selected after it’s typed
const isFirstRender = useRef(true)
const [error, setError] = useState(false)
const [title, setTitle] = useState("")
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false
return
}
setError(!title)
}, [title]);
return (
<sp-textfield
invalid={error ? true : null}
onInput={(e) => setTitle(e.target.value.trim())}
value={title}
>
<sp-label isrequired={true} slot="label">Title</sp-label>
</sp-textfield>
)
No issue if there’s no invalid attribute at all or it never changes (can be true on first render)
