Fix TextInput being marked dirty from focus#255
Conversation
|
|
||
| const onBlur = (evt) => { | ||
| if (evt.target.checkValidity()) { | ||
| if (isDirty.value && evt.target.checkValidity()) { |
There was a problem hiding this comment.
If the text input is marked as required, should the blur on an empty text input trigger the checkValidity? That would mean that the user "passed through" without filling the input itself.
Ref https://thunderbird.github.io/services-ui/?path=/story/components-textinput--required
There was a problem hiding this comment.
Thankfully that is covered automatically for us!
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required#constraint_validation
We already show "this field is required" we don't need to warn them about how the field is empty until we check for validation OR unless they dirty the input.
There was a problem hiding this comment.
Ah I thought that we wanted to warn them with our own error design instead of mixing in the built-in styles. All good then!
Oh that's where the ticket was. I thought we had one but couldn't find it and this issue was driving me crazy. Please do though 😄 |
3 participants
Fixes #254
Fixes #99
We should only be marking a text input as dirty if we change something in it, and not when we simply focus and blur away. This fixes my main annoyance with our textinput 😄
Also I added a story for #99 and confirmed readonly works as intended.