Question 211894 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to disable autoComplete in React form?

I’m having a weird bug on my React form and the username and the password gets filled automatically when I go to that page.

My Input component:

 return (
    <div
      className={
        error ? [styles.form_group, styles.error].join(" ") : styles.form_group
      }
    >
      {placeholder && (
        <div
          ref={refPlaceholder}
          className={styles.placeholder}
          style={props.defaultValue ? { display: "none" } : null}
        >
          <label htmlFor={name} className={styles.label}>
            {placeholder}
          </label>
          {props.required && <span className={styles.star}>*</span>}
        </div>
      )}
      <input
        ref={refFormControl}
        {...propsInput}
        autoComplete="off"
        className={styles.form_control}
        name={name}
      />
      {error && (
        <span ref={refFormError} className={styles.error}>
          {error}
        </span>
      )}
    </div>
  );

and I’m just using it in div like:

<div>
          <Input
            id="username"
            type="text"
            name="username"
            placeholder="Username"
            error={getInputError(errors, "username")}
            onChange={(e) => onChangeFormValue("username", e.target.value)}
          />
</div>

Values of username and password gets filled automatically.

image

I have tried following, but none worked:

  1. add form and set it to autoComplete: 'off'
  2. autoComplete='new-password'
  3. added hidden input value on top of form, but didn’t work either
Tags:

2

Answers


  1. 0

    You have to wrap the input tag into the form:

     <form autocomplete="off">
      <input type="text" />
    </form>

    Also, you can try

    <input name="my-field-name" autoComplete="new-password" />
    Login or Signup to reply.
  2. 0

    HTML’s tags are not case sensitive, but attributes are.

    In your code you have autoComplete="off" with a capital letter C.

    Try with autocomplete="off" (all lower-case).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search