form-atoms / form-atoms

Atomic form primitives for Jotai

Home Page:https://codesandbox.io/s/getting-started-with-form-atoms-v2-ddhgq2?file=/src/App.tsx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add `clear` action to support controlling `input[type='file']`

MiroslavPetrik opened this issue · comments

In react the file input cannot be controlled. This means, that when we reset a form, the input will still look as filled. (it will display the filename of last picked file).

Users must clear the input manually via the ref. We already have ref in the fieldAtom which is good.

I've created a reusable hook which provides clear() action which uses the ref. This is similar to the existing focus() method.

Lastly, I have clearInputEffect. Which essentially does what React could do - it waits for the empty value to be set on the field (e.g. when we call reset()) and then clears the input. The empty value is not important in this case.

This clear effect hook is not only usage for the clear action. Other is having clear buttons next to the input, to enable users to quickly clear the input content. This can be useful for any input, e.g. date, password...

I believe this clearing would make this library more complete, as we aim here to have all the inputs controlled.

is there a way to move it out of use effect and into an event? useEffect scares me for this kind of thing. Tried to be really care about it for the initial value hook

decided i am going the react route and i do not want to own this