Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow conditionally rendered optional inputs #53

Open
bitofbreeze opened this issue Feb 13, 2023 · 1 comment · May be fixed by #54
Open

Allow conditionally rendered optional inputs #53

bitofbreeze opened this issue Feb 13, 2023 · 1 comment · May be fixed by #54

Comments

@bitofbreeze
Copy link
Contributor

You cannot currently have an input that is optional and only sometimes rendered. This is because calling useValidatedInput requires its ref to be assigned to an input. If it's not, you get the following error:

Error in validateInput useEffect Error: validateInput expected an inputEl.form to be available for input "inputName"
    at invariant2 (index.tsx:338:11)
    at validateInput (index.tsx:419:5)
    at go (index.tsx:975:26)
    at index.tsx:1010:5
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:13)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:7)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
    at flushPassiveEffects (react-dom.development.js:26984:14)

You cannot conditionally call the hook itself of course, so it makes it impossible to have a situation like: if you are an admin, have an extra field in your "create item" form for the item's value. When a normal user creates an item, we do not want to render or validate that field because only admins can assign value. But when an admin creates an item, you want to validate that the item's value is in a range using this lovely library.

Hope that example makes sense.
@brophdawg11 brophdawg11 linked a pull request Feb 17, 2023 that will close this issue
Open
@brophdawg11
Copy link
Owner

yeah this looks like it's missing a short circuit like the other useEffect calls. However, with the new type safety from #46 we may need to think about adding a new optional field to the definition. Otherwise the types will be wrong:

let formDefinition = {
  inputs: {
    optionalField: {
      validationAttrs: {
        required: true
      }
    }
  }
};

If the field is required when it's present, then the type of serverFormInfo.submittedValues.optionalField is going to be string which is wrong in the case it's not rendered.

Maybe we add the field alongside the multiple indicator:

let formDefinition = {
  inputs: {
    optionalField: {
      optional: true,
      validationAttrs: {
        required: true
      }
    }
  }
};

And we could use that to make the type string | null

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don't error on optional input brophdawg11/remix-validity-state
2 participants
@brophdawg11 @bitofbreeze