Cannot turn autoCorrect to {false} in react native TextInput

Published

On my TextInput change text, I detect whether the user pushed the @ button for mentions.

onChangeText(text){
    const suggestTrigger = text.match(/[email protected][A-Za-z0-9]*$/i) //grab "@" trigger
    const searchQuery = (suggestTrigger && suggestTrigger.length > 0) ? suggestTrigger[0] : null;
    this.setState({
        searchQuery: searchQuery
    })
}

Then, in my render, I do:

<TextInput 
    autoCapitalize={this.state.searchQuery ? "none" : "sentences"}
    autoCorrect={this.state.searchQuery ? false : true}
    onChangeText={this.onChangeText}
/>

However, even when I do this, the autoCorrect does not turn off.

I still see this:

enter image description here

This is causing problems because oftentimes the system replaces the entire mention with a different word altogether.

How can I turn autoCorrect and autoCapitalize off when the user pushes the @ button?

I have even tried rendering an entirely different , but the behavior remains.

Source: Ios

Published
Categorised as ios, keyboard, react-native, text

Answers

TL;DR: you should close and re-launch your keyboard after the TextInput autoCorrect toggling value.

Buddy, this is not your fault, I had the same issue on autoFocus of react native TextInput component. I set a state name for the TextInput editable prop and then with the pressing pencil button I change the editable props. The designer told me after the TextInput made editable the cursor should be focused, so I use the isEditable state for autoFocus prop, see below:

state = {
  isEditable: false
};

handleEdit = () => {
  const { isEditable } = this.state;
  this.setState({ isEditable: !isEditable });
};

<TextInput
  autoFocus={isEditable}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
/>

enter image description here

Then I press the edit button and it turns to:

enter image description here

But it is not focused and the Keyboard didn’t launch, I sought and found this link, the TextInput does not change/update some of its props after componentDidMount. ☹️. Also, it is not different in iOS or Android, both of them has this issue, I used ref to focus on this TextInput after the isEditable state made true. see following code:

<TextInput
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

componentDidUpdate() {
  const { isEditable } = this.state;
  if (isEditable) {
    this.input.focus();
  }
}

And your case:

Absolutely you can not use ref because the autoCorrect should render with react native and it is not like focus() and blur() so JavaScript cannot access to it.

I make a test shape for your case, I create another button like a star for toggling autoCorrect value alongside my edit button. the filled star means autoCorrect is true and the lined star means autoCorrect is false, now see the test area code and view:

state = {
  isEditable: false,
  correct: true
};

handleCorrect = () => {
  const { correct } = this.state;
  this.setState({ correct: !correct });
};

<TextInput
  autoCorrect={correct}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

enter image description here

In the above photo, it is so clear the autoCorrect rendered as true, so it is enabled:

enter image description here

When I write a wrong Persian word the auto-correction show its suggestion, now time to press the star button:

enter image description here

Wow, the autoCorrection is false in the above situation but still we see the auto-correction of the cellphone. it is just like autoFocus it is rendered in the first render and after it, the TextInput could not change/update its props. suddenly I press edit button:

enter image description here

And I press the edit button again, so surely, you realized the autoCorrect is false now, ok now see what I saw:

enter image description here

The autoCorrect remained false by my double pressing edit button and now the auto-correction of device disappears completely. I don’t know it is a bug or my bad understanding but I realized in this test area, for update autoCorrect value, we should do something after changing its value to close the iPhone keyboard and then re-launch it. the main thing that TextInput has issued is the launched keyboard.

For my test, when I pressed the edit button the editable prop of the TextInput is changed to false and the keyboard is closed, so when I pressed the edit button again, the TextInput get focused and keyboard re-launched with new autoCorrect value. This is The Secret.

Solution:

You should do something, to close and open again the iOS keyboard with the new autoCorrect value. for the test case that I wrote for your question, I decided to do a hybrid innovative solution, using ref and the callback of setState:

handleCorrect = () => {
  const { correct } = this.state;
  this.input.blur(); //-- this line close the keyboard
  this.setState({ correct: !correct },
    () => {
      setTimeout(() => this.input.focus(), 50);
      //-- above line re-launch keyboard after 50 milliseconds
      //-- this 50 milliseconds is for waiting to closing keyborad finish
    }
  );
};


<TextInput
  autoCorrect={correct}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
  ref={input => {
    this.input = input;
  }}
/>

enter image description here

And after pressing the star button the keyboard close and re-launch and the auto-correction disappear completely.

enter image description here

Note: obviously, I summarized some other codes like destructuring and writing class or extends and etc for better human readability.


Ashton Legros

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq