label "for" prop is wrong when passing id to input element

[mnlfischer]

Hello, I'm using Remix with Conform and add the input props via the conform function getInputProps. This functions sets the id for conform. Label and input are in context of a textfield component and inside a form. When setting the id for the input element by conforms getInputProps the label picks up a wrong id for "for" prop.

Example here:
https://stackblitz.com/edit/remix-run-remix-risq3o?file=app%2Froutes%2Fexample.tsx

I can set the htmlFor prop by getting the id from getInputProps but I would expect that the label picks up the id from the input.
Do I miss something here or is this behavior intended?

[snowystinger]

Thanks for the discussion, this appears to be a bug. I'm going to convert this to an Issue.

[snowystinger]

Thanks again for the example as well. In the meantime you can probably work around it by pulling the id off the returned object and sending it through the TextField component itself. That should sync it up between the Input and the Label.

[mnlfischer]

thanks for your investigation!

In case of someone wants to implement conform:
I have updated my implementation that works with conform and rely on all react-aria implementation.
To wire conform the name prop is enough, so I can skip using getInputProps and the id prop can be set by react-aria.
In addition I can add all constrains by getZodConstraint. This makes the work around obsolete but nice to spot a bug that can be addressed.

Implementation Remix with Conform and react-aria:
https://stackblitz.com/edit/remix-run-remix-gep81q?file=app%2Froutes%2Fexample.tsx