Text Field Auto Complete/Auto Fill Tab Behavior

[jerrickhakim]

On text field component.

When the variant is set to outline and the auto complete prop is set upon clicking the auto complete suggestion on iOS the next input in the dom is not focused.

Filled and standard variants work as expected.

Here's is a example on the themes store I've also located:

https://minimals.cc/auth-demo/split/sign-up

https://github.com/mui/material-ui/assets/35478687/b886760d-f808-4fd4-9a20-658048f7057b

Search keywords:

[mnajdova]

Can you create a minimal reproduction with the code too? It would help us debug.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[jerrickhakim]

"use client";

// React
import { useRef, useState } from "react";

// Formkit
import { Formik } from "formik";

// UI
import TextField from "@mui/material/TextField";
import LoadingButton from "@mui/lab/LoadingButton";

// MUI
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";

export default function LoginForm({ onSuccess = false, redirect = false }) {


  // Form ref
  const form = useRef();

  const [showPassword, setShowPassword] = useState(false);


  //
  // Form Submit Event
  //

  const handleSubmit = async ({ email, password }) => {

  };

  const handleClickShowPassword = () => setShowPassword((show) => !show);



  return (
    <Formik
      className="w-full"
      initialValues={{ email: "", password: "" }}
      validate={(values) => {
        const errors = {};
        if (!values.email) {
          errors.email = "Email is required";
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = "Invalid email";
        }

        if (!values.password) {
          errors.password = "Password is required";
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          handleSubmit(values);
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
      }) => (
        <form onSubmit={handleSubmit} className="w-full" ref={form}>
          <TextField
            fullWidth
            color="input"
            id="email"
            label="Email*"
            variant="outlined"
            autoComplete="current-username"
            placeholder="[email protected]"
            onBlur={handleBlur}
            onChange={handleChange}
            value={values.email}
            error={errors.email && touched.email}
            helperText={errors.email && touched.email && errors.email}
            sx={{
              mb: 2,
            }}
          />

          <TextField
            fullWidth
            color="input"
            id="password"
            label="Password"
            autoComplete="current-password"
            variant="outlined"
            onBlur={handleBlur}
            onChange={handleChange}
            sx={{
              mb: 2,
            }}
            type={showPassword ? "text" : "password"}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    edge="end"
                  >
                    {showPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
            value={values.password}
            error={errors.password && touched.password}
            helperText={errors.password && touched.password && errors.password}
          />

          <LoadingButton
            fullWidth
            loading={isSubmitting}
            disabled={isSubmitting}
            type="submit"
            variant="contained"
            size="large"
            sx={{
              textTransform: "none",
            }}
          >
            Login
          </LoadingButton>
        </form>
      )}
    </Formik>
  );
}

[Burakhan]

Any progress? I have the same problem. When I remove the fieldset element in Outlined from the html, it works correctly.

[mj12albert]

When I remove the fieldset element in Outlined from the html, it works correctly

@Burakhan Thanks for this, sounds like maybe focus incorrectly went to that fieldset/legend instead 🤔

[Burakhan]

Yeah, I actually got rid of the form element as a more permanent solution and started using the button's onclick instead.