React-hook-form: Passing type="password" to controller MUI textfield throws a warning.

[TimothyStiles]

Just started playing around with react-hook-form and have been getting this weird warning every time I try to make a password field.

          <Controller
            as={<TextField/>}
            control={control}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />

When I comment out type="password" the warning goes away.

          <Controller
            as={<TextField/>}
            control={control}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            // type="password"
            id="password"
            autoComplete="current-password"
          />

Any idea what's happening here? Is there a way to flag this field as a password field without getting a warning? Other fields without password type seem to work fine.

Thanks.

[bluebill1049]

defaultValue: https://react-hook-form.com/api#Controller check out the doc it's changing from uncontrolled to controlled.

[TimothyStiles]

That was exactly it. Thanks @bluebill1049. I'll close the thread now. For anyone who stumbles upon this in the future here's the solution:

          <Controller
            as={<TextField/>}
            control={control}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            // added default value
            defaultValue={{ value: '' }}
          />

[bluebill1049]

thanks for sharing answer too :) @TimothyStiles