really strange behaviour with Controller when there's a switch

[novaknole]

Hi @thanh-nguyen-95 @bluebill1049

First of all, I am really sorry that I can't exactly produce the example here.. So I will try to explain with my words. Maybe you can still understand and help me... but I am including video below...

<Controller
          name={isFileChosen}
          control={control}
          defaultValue={false}
          render={({ field: { onChange, value } }) => (
            <ContentSwitcher
              onChange={onChange}
              selected={value}
              items={['Text', 'File']}
              paddingSettings={{
                horizontal: spacing * 2,
                vertical: spacing / 4,
              }}
            />
          )}
        />
      </div>
      {!watch(isFileChosen) ? (
        <Controller
          name={textInputName}
          control={control}
          defaultValue={''}
          shouldUnregister={shouldUnregister}
          rules={{ required: 'This is required.' }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <TextInput.Multiline
              wide
              placeholder={placeholder}
              value={value}
              onChange={onChange}
              status={!!error ? 'error' : 'normal'}
              error={error ? error.message : null}
            />
          )}
        />
      ) : (
        <Controller
          name={fileInputName}
          control={control}
          defaultValue={''}
          shouldUnregister={shouldUnregister}
          rules={{ required: 'This is required.' }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <FileInput
              onChange={onChange}
              value={(value)}
              status={!!error ? 'error' : 'normal'}
              error={error ? error.message : null}
            />
          )}
        />
      )}

Here is the link... https://drive.google.com/file/d/1eXrziIlBjd9xBB5jScLPicBcL17_bgHB/view

I have a text or file input thing. User decides which one to use by switch. Let's say he first chose file input. Uploads an image.

Problem is that when he goes back to text field, it seems to be filed with [object filelist]. I really don't understand why, I use different names for those controllers. I am sure of this.

Any idea ?

[thanh-nguyen-95]

Since we don't have a working CodeSandbox, here are my suggestions:

• Make sure to pass ref, name, value and onChange to your component when rendering with Controller. Most cases of incorrect form values should be solved with that
• Pass a different key prop to each Controller (1 for the text input, one for the file input) and see if it works. Maybe try adding it to the component itself instead of the Controller if the former doesn't work

That's all I can think of right now. Try it and see if it helps. Good luck!

[bluebill1049]

thank you @thanh-nguyen-95 🙏