Error in validateInput useEffect Error: validateInput expected an inputEl.form to be available for input about remix-validity-state HOT 6 CLOSED

Released in 0.10.0

from remix-validity-state.

Well turns out you don't get the value that way anyway. Looks like I've just gotta use refs anyway.

It would be nice if info contained the value. It would be nicer if there was also a function returned to update a field, so that you could have one field that is based on another, like a hidden input that stays in sync with the visible one. Here is what a similar library does: https://www.remix-validated-form.io/reference/use-control-field

I really want to use this library because I think using something like zod for validation is overkill, which other solutions seems to rely on. I just need a way to watch (subscribe to) and modify form state and don't want to write my own solution. Something like react-hook-form shines here so maybe I should use that with this as the validation layer... but there is some overlap because RHF also tracks validity.

from remix-validity-state.

👋 Thanks for trying out remix-validity-state @CSFlorin!

when you call it without destructuring getInputAttrs inside an input element, you get that error

I'm not quite sure the use case you're describing that produced that error - would you be able to provide a reproduction? Seeing a use-case in action would help understand the true source of the error and what you're trying to accomplish.

It would be nice if info contained the value. It would be nicer if there was also a function returned to update a field

I think it's probably safe to expose value on info. And that would even open up a potential API change to a serverFormInfo.submittedFormValues entirely since we'd be able to send back the submitted values inside serverFormInfo.inputs, but I need to think about that one a bit more and see if it has any rough edges.

I'm a bit less confident that we want to expose a setValue since I'm generally aiming to move away from controlled inputs in this library and leverage built-in HTML form functionality as much as possible. If we expose the value and the ref (or if you used your own ref), then you'd be able to programmatically set another inputs value if needed via the following:

  // Assume we expose `value` and `ref` from here
  let a = useValidatedInput({ name: "a"  });
  let b = useValidatedInput({ name: "b" });
  
  React.useEffect(() => {
    if (!a.ref?.current || !b.ref?.current) return;
    b.ref.current.value = calculateValueBasedOnA(a.ref.current.value);
    b.ref.current.dispatchEvent(new Event("input"));
  }, [a, b]);

like a hidden input that stays in sync with the visible one

I'm also curious about this hidden input use-case - presumably if it's hidden then it's something you just need at submission time, so ifs there a reason you couldn't just just generate the derived value in your action based on the submitted value of a field? Instead of of constantly deriving the value and sticking it in a hidden input client side?

Also if it's a hidden input I thin you could "sync" it with another field given the value above by just using defaultValue?

<input {...b.getInputAttrs()} defaultValue={calculateValueBasedOnA(a.value)} />

from remix-validity-state.

Right now there isn't a clear way to even pass in my own ref though so I think exposing it would be an essential minimum. If I pass in my own, it overwrites the one coming from getInputAttributes() and I get the same error from the library.

Stackblitz isn't working for me right now to show an example, but if you call useValidatedInput without passing the result of getInputAttributes() to an input, you get this error. Because I am componentizing each input, it would be helpful to grab another input's data in a component by calling useValidatedInput({name: otherInput}), but this isn't an absolute deal breaker as I can as a last resort call this at the form level and drill down the props.

The data I'm deriving the hidden input value from is only available in the component via the loader data so it isn't available in the action. I think the defaultValue thing should work, but this brings us back to being able to access the input values, which this library seems to actively prevent, even via my own ref which breaks this library by overwriting your ref. I also can't use your ref coming from getInputAttributes() because it's the following function:

(node) => {
  for (let ref of refs) {
    assignRef(ref, node);
  }
}

from remix-validity-state.

You should be able to pass a ref via useValidatedInput - that got implemented a bit ago in #19. If that's not working that's news to me - I think that code got copy pasted from another library so I sort of assumed it worked as advertised :). I'll take a look into that.

I think the defaultValue thing should work, but this brings us back to being able to access the input values, which this library seems to actively prevent

I was suggesting above that we expose the value for this use case. It's the exposure of setValue and elimination of submittedValues that I'm not yet sure about.

from remix-validity-state.

Oh I didn't realize you pass it into the hook 🤦‍♂️ Alrighty I'll give it all a spin. Thanks for the responsiveness, and yes the value would be cleaner but this should unblock.

from remix-validity-state.