refactor: use native validation for parameter form #3349
Conversation
Here switched to native html solution for validation in parameter variable form. Added three new form utilities to replicate existing behavior with closing errored form only on the second attempt when all errors are shown. - Form - useFormField - checkCanRequestSubmit
| }; | ||
| }; | ||
|
|
||
| export const useFormField = ({ |
There was a problem hiding this comment.
- I am confused about the difference between useFormField and useField
- shouldn't those be components?
- shoudln't those be in the design system package?
There was a problem hiding this comment.
useFormField relies on native validation,
useField is old implementation, git did not diffed renaming well
There was a problem hiding this comment.
then we need to call it useFieldDeprecated?
There was a problem hiding this comment.
just so when we touch deprecated code, we migrate it to the new one
There was a problem hiding this comment.
I saw the @deprecated thing, but I think its not visible enough to really incentivice to refactor
There was a problem hiding this comment.
visible enough, we use it only in variable popover which I'm gonna rebuild anyway
|
|
It never saved on blur |
|
Lets get the desired behavior here? without waiting for a second PR? |
|
It never saved on blur because we use the same forms for "create" and "edit". Form will loose focus if save on blur. |
What change to revert if you want to save on blur? |
Maybe we need to differentiate the 2 cases? Because it feels much better when updating stuff when it applies right away and indeed when creating new stuff, you don't want it to create before you actively said you are done. |
Its tricky. When I changed something and it didn't save right away - then I am probably expecting it with ESC to not save it at all. When I changed it but it was visibly auto-saved (I can see it saved), then ESC is probably just expected to close the thing, wdyt? We can compare with some other UX best practices. This is my hunch |
|
My biggest beef with our current behavior in some cases is that when I change a value and it is represented somewhere else - I don't see it being updated, I feel like if I close it, it will be gone, there is no clarity what happens if I close it now. When everything is auto-saved all the time and reflected immediately everywhere - I feel most safe, but there are cases like you mentioned where I am creating a new item and don't expect it to be created until I do something confirmational like hitting ENTER |
|
Did some testing with figma on behavior https://share.descript.com/view/8ETeg4IxS21 |
when something was changed in the input and it wasn't autosaved, hitting ESC is basically like a preventDefault() for the blur that comes with hitting ESC, where blur would normally save, but since we hit ESC, blur won't save |
Here switched to native html solution for validation in parameter variable form. Added three new form utilities to replicate existing behavior with closing errored form only on the second attempt when all errors are shown.
These are a few important apis for validation