react native – Bug: iOS autofill persists throughout screens, breaking InputBox

0
1
react native – Bug: iOS autofill persists throughout screens, breaking InputBox


Situation

I’ve carried out a easy wrapper round a TextInput element, and I’m utilizing it in a number of screens.

Within the app move, the person:

  1. Indicators-up utilizing electronic mail/password
  2. Is redirected to a profile creation display

After I let iOS autofill a “new safe password” on the sign-up web page, after it being profitable, the TextInput on the subsequent display is yellowed-out as if iOS had autofilled one thing in, however the textual content field is empty. From there I can faucet on the TextInput which pulls up the keyboard, I can kind in letters, however nothing really occurs.
I’ve carried out logic to stop the person persevering with with out coming into some textual content in there, so the person is basically caught (which I’ve eliminated for this demo).

There a number of consecutive profile creation screens. The opposite TextInput fields are additionally affected, till the third display for some purpose.

bug in action

Disabling autofill, secureTextEntry, or setting textContentType to none on InputFields (which are not the password ones) doesn’t work.
I believed it could possibly be some buried state I unintentionally preserve, or a misused reference. Or one thing to do with routing? I am at a little bit of a loss, and will use some assist understanding how this will come about.

Code

TextInput wrapper element:

import React from "react";
import {
  StyleSheet,
  Textual content,
  View,
  TextInput,
  TextInputProps,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import { useColors } from "@/parts/ThemeProvider";
import { Eye, EyeOff } from "lucide-react-native";

const { width } = Dimensions.get("window");

interface CustomInputProps extends TextInputProps {
  label: string;
  error?: string;
  isPassword?: boolean;
  disableAutofill?: boolean;
}

export const CustomInput: React.FC = ({
  label,
  error,
  isPassword = false,
  disableAutofill = false,
  ...props
}) => {
  const colours = useColors();
  const [secureTextEntry, setSecureTextEntry] = React.useState(isPassword);

  const toggleSecureEntry = () => {
    setSecureTextEntry(!secureTextEntry);
  };

  return (
    
      {label}
      
        
        {isPassword && (
          
            {secureTextEntry ? (
              
            ) : (
              
            )}
          
        )}
      
      {error && {error}}
    
  );
};

I don’t use anything special with the component:

const [name, setName] = useState("");


  

Any concepts on what I needs to be trying into to debug this?

Different Infos

  • Expo 52.0.36
  • React Native 0.76.7
  • React 18.3.1
  • iOS 18.4.1

LEAVE A REPLY

Please enter your comment!
Please enter your name here