CODEWITHSUNDEEP
react-native
Ajay Sivan
Ajay Sivan

Reputation: 2989

TextInput cursor jump to right end when the input is empty

Cursor in the TextInput is jumping to the right end when the field is empty.

<TextInput 
    autoCorrect={ false }
    keyboardType="number-pad"
    autoCapitalize="none"
    placeholder="Inactivity time in seconds"
    onChangeText={ (value) => this.setState({ inactivityTime: value }) }
    value={ this.state.inactivityTime }
    style={ commons.pinInput } />

enter image description here

This issue only happens when the value prop of the TextInput is set to the state.

Upvotes: 17

Views: 6479

Answers (9)

Sherif Samir
Sherif Samir

Reputation: 685

SOLUTION:

Add these 2 attributes

selectTextOnFocus={true}
selection={{ start: start: text.length, end: text.length }}

Upvotes: 0

Umair Rehman
Umair Rehman

Reputation: 89

here is what I found. Instead of applying alignSelf center to textInput I just added flexDirection row to parent View component and by doing justifyContent center the text becomes centered align.By using this approach the cursor also not goes to right end corner in android.

<View
    style={{
    width: '80%',
    height: 40,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    }}>
    <TextInput
     placeholder={'Enter amount      '}
     style={[styles.bottomText]}
    />
</View>

Upvotes: 0

do7
do7

Reputation: 49

Simply replace props "value" by "defaultvalue"

https://reactnative.dev/docs/textinput#defaultvalue

Upvotes: 0

Reverate
Reverate

Reputation: 183

This is not applicable to everyone, but if you can get away with not using a controlled component (i.e. don't pass a value prop to the TextInput) then this issue will not occur.

Upvotes: 2

Philiong
Philiong

Reputation: 358

It seems that there is no place for the placeholder and the cursor at the same time when textAlign: 'center'.

To fix this, when the TextInput is focused, you should remove the placeholder also.

To do that i pass this to the placeholder prop.

placeholder={
    textInputRef.current?.isFocused() || inputValue !== ''
        ? undefined
        : placeholder
}

And then you would also need this useRef

  const textInputRef = useRef<TextInput | null>();

What this does, is to check if the TextInput if focused, or if the inputValue isn't empty/undefined then, we set the placeholder to undefined because, we want to remove the placeholder to leave space for the cursor.

Upvotes: 4

Mario Villa
Mario Villa

Reputation: 1

For me it was failing only on Android. So what worked for me was:

if (Platform.OS === 'android') {
   this.setState({value: ' '})
   setTimeout(() => {
       this.setState({value: undefined})
   }, 0.001);
}

Where 'value' is the same 'value' prop of the input. So you should execute that snippet in componentDidMount or useEffect. It's not fully tested, but I guess you can have a better idea now.

Upvotes: 0

sophin
sophin

Reputation: 623

To fix this, we will use a state hook

Declare a new variable like this:

const[value, setValue] = useState("");

create text input field like this:

<TextInput
          placeholder="Enter food item"
          style={{
            margin: 10,
            justifyContent: "center",
            flex: 1,
            textAlign: "center",
          }}
          onChangeText={(val) => setValue(val)}
        />

So this method will prevent you from getting cursor jumping to the right.

There is another props called caretHidden. You can use them too but it will make cursor disappear which won't be a good user experience.

caretHidden = {true}

If this works, don't forget to upvote me.

Upvotes: 0

Saif Ubaid
Saif Ubaid

Reputation: 334

After wasting lot of time i found the solution add multiline={true}

Upvotes: 26

Gaurav Roy
Gaurav Roy

Reputation: 12210

this is the exact problem i was facing, its a bug in React native textInput when the input is empty , the cursor jumps to the right . It was only happening when i used textAlign center.

So i had to go through the process of actually editing the design and assigning the placeholder and text to be centered in the left :

<TextInput
textAlign="left"
/>

Hope this fix helps. actually upvoting question too , so that. ican get a real fix for the answer.

Upvotes: 1

Related Questions