ввод с заглавной буквы перемещает курсор в конец

Question

Использование заглавных букв в теге ввода заставляет курсор перемещаться в конец текста.
Есть идеи, как это исправить или как это можно сделать другим способом, чтобы избежать этой проблемы?

Пожалуйста, проверьте Пример CodePen

class App extends Component {
  state = {
    inputValue: ''
  }

  handleInputchange = (e) => {
    this.setState({ inputValue: this.handleCapitalize(e.target.value) })
  }

  handleCapitalize = (str) => {
    return str.toUpperCase();
  }

  render() {
    return (
      <input onChange={this.handleInputchange} value={this.state.variableName} />
    );
  }
}

Answer 1

Это происходит потому, что текст в variableName был полностью заменен после ввода. Вы можете обойти это, вручную управляя выбором DOM, используя ссылку. Или, если это возможно для задач проекта, поиграйтесь с некоторыми стилями ввода.

Эта проблема обсуждалась там, на github .