Как сохранить фокус на поле ввода в Firefox в React

Question

У меня есть поле ввода примерно так:

 <input
     type="text"
     id="someid"
     autoFocus={true}
     ref={this.inputRef}
/>

Я устанавливаю createRef в конструкторе следующим образом:

constructor(props) {
   this.inputRef = React.createRef();
}

Затем в componentDidMount () я устанавливаю автофокусв true:

componentDidMount() {
  this.inputRef.current.autoFocus = true;
}

В Chrome поле ввода всегда автофокусировано, что я и ожидаю.В Firefox он сосредоточен на монтировании, однако теряет фокус при щелчке вне поля ввода.

Как сохранить фокус на Firefox, даже если щелкнуть за пределами поля ввода?

Answer 1

Привет, вы можете проверить ниже URL. Я создал образец для вас

https://stackblitz.com/edit/react-hubbxi

class App extends Component {
  constructor() {
    super();
    this.inputRef = React.createRef();

  } 
  componentDidMount() {
    this.focusInput()

  }
  focusInput = ()=>{
    this.inputRef.current.focus();
  }
  render() {
    return (
      <div>

         <input
     type="text"
     id="someid"
     autoFocus={true}
     onBlur={this.focusInput}
     ref={this.inputRef}
/>
      </div>
    );
  }
}