resetting TextInput isInvalid prop onChange

[luisrudge]

I'm using React Router's action data to return validation errors from the server. I'm passing those validation errors to my TextInput component (based on react-aria-components) like this:

<TextInput
  label="Title*"
  type="text"
  id="title"
  name="title"
  isRequired
  autoComplete="off"
  isInvalid={actionData?.errors?.title ? true : undefined}
  errorMessage={actionData?.errors?.title?.[0]}
  defaultValue={assignment.title}
/>

The problem is: once I set the isInvalid prop, due to how native html5 validation behaves, the form can't be submitted anymore.
steps:

• at least 5 characters are required for the title
• I add 3 chars, press enter, server validation kicks in and returns the error object with an error message for the title
• I type 3 more chars, press enter
• Nothing happens because the form still considers the input invalid (since I'm still setting isInvalid=true

I know this is not an issue with RR or RAC per-se, but it feels like a pretty common scenario and I wonder if you have any suggestions on how to fix this?

Thanks

[devlzcode]

I use the react-aria-components Form and the react-router useSubmit then pass errors to Form.validationErrors

[luisrudge]

Gotcha. I'm using react-router's Form component so it handles sending things to the server via an action etc. Sucks that these things are not more compatible

[luisrudge]

oh, looks like I can use https://react-spectrum.adobe.com/react-aria/Form.html#validation-context
@devlzcode thanks for the tip!