form doesn't get submitted if i use dynamic show

[novaknole]

@bluebill1049 Hi Bill,

I have a checkbox in my component. If you have it turned off, it means my form shows input type text. If it's turned on, Then my form shows the input type file.

My checkbox is called isRuleFile.

This is my rest of the code.

{!watch('isRuleFile') ? (
            <Controller
              name="daoConfig.rules"
              control={control}
              defaultValue={''}
              rules={{ required: 'This is required.' }}
              render={({
                field: { onChange, value },
                fieldState: { error },
              }) => (
                <InputField
                  label=""
                  onInputChange={onChange}
                  value={value.toString()}
                  height={'100px'}
                  width={'100%'}
                  placeholder={'DAO rules and agreement ...'}
                  error={!!error}
                  helperText={error ? error.message : null}
                />
              )}
            />
          ) : (
            <div
              style={{
                width: 'inherited',
                display: 'flex',
                flexDirection: 'row',
                verticalAlign: 'middle',
                lineHeight: '40px',
                marginTop: '17px',
              }}
            >
              {
                //@ts-ignore
                <input
                  {...register('rulesFile', { required: true })}
                  type="file"
                />
              }
              {errors.rulesFile &&
                'Please upload a file, otherwise switch to Text format.'}

              <ANButton
                label={'Upload to IPFS'}
                buttonType={'primary'}
                onClick={uploadRulesToIpfs}
                style={{ marginTop: '34px' }}
                disabled={!watch('rulesFile') || watch('rulesFile').length == 0}
              />
            </div>
          )}

And in the end of my form, I got this:

<ANButton
              // disabled={!isConnected}
              label={'Save settings'}
              buttonType={'primary'}
              onClick={handleSubmit(callSaveSetting)}
              style={{ marginTop: '34px' }}
              width={'100%'}
            />

Now, The problem is that if I turn on the checkbox, which causes that my form loses input type text field and appears input type file in real time, then my form never gets submitted if I click the final button - callSaveSetting never gets called. This only happens if I remove and add new fields dynamically by using watch as shown in the above example.

I'd love to know what's going on and if I am doing something really wrong.

Thanks for such a great plugin. Really appreciate it .

[bluebill1049]

can you provide a simple codesandbox for the above?

[thanh-nguyen-95]

I believe when the input is hidden, react-hook-form still validates the input, which triggers the required rules.

You can use handleSubmit(onSuccess, onError) to check if that is the case.

I suggest using validate in this case:

<Controller
  rules={{
    validate: (value) => {
      // field is valid by default if `isRuleFile` is `false`
      if (!isRuleFile) return true

      const isValid = /* your logic here */

      if (!isValid) {
        return 'Your error message'
      }
 
      return true /* value is valid */
    }
  }}
/>

[bluebill1049]

Thanks 👍 that's right.

[novaknole]

Thanks for the follow up...

I realized why it's happening. So the idea is that when I turn on the checkbox, input types change visually all fine. and after clicking submit button, it still tries to validate the input type text even though I changed it to <input type file.

CodeSandbox: https://codesandbox.io/s/priceless-varahamihira-srqhw?file=/src/App.js

Okay, so here is how you test. as soon as page loads, click checkbox, input types are gonna change. Then click submit. In the console you will see that it's saying submitting the form. All works fine. And I just noticed that it's working for 7.6.0 version.

Then I changed it to 7.4.0 (one i am using in my app and it stopped working).. Makes sense ?

[thanh-nguyen-95]

Since version 7.5.0, unmounted inputs will no longer be validated.

Using a custom validate is safer in my opinion considering react-hook-form might change this behaviours in the future.

[novaknole]

so if I add custom validate for the input type text in my example, and I turn on the checkbox, which will cause removing input type text and appearing input type file, and then I click submit, If i have custom validate, it will be called and I am facing the same problem. no ?

[thanh-nguyen-95]

so if I add custom validate for the input type text in my example, and I turn on the checkbox, which will cause removing input type text and appearing input type file, and then I click submit, If i have custom validate, it will be called and I am facing the same problem. no ?

Technically both validate functions (built-in required and custom validate) are called in your case. However, the custom validate is "aware of" isRuleFile so it validates the value correctly.