CODEWITHSUNDEEP
reactjsfirefoxinputfocus
Tyler
Tyler

Reputation: 89

React Input Losing Focus in Firefox

I am coding in react js.

We have an input form, which has text input. The text input fires an onChange function that results in a change in state (and thus rendering). 

var resultJSXcount = 1;
for (let i = 0; i < myArray.length; i++){
  resultJSXTable.push(
    <tr key= {resultJSXcount++}>
      <td  style = {{"paddingRight": "10px"}} > {i+1}: </td>
      <td  style = {{"paddingRight": "10px"}}> 
        <input 
          type='text' 
          id = {i}
          value = {myArray[i].name}
          onChange = {(event)  => {
            myArray[i].name = event.target.value; 
            this.props.updateState()}}
          />
      <span style={{"color":"red"}} > 
        {this.props.parentState.errorName[i]} 
      </span>
    </tr>
  ); 
}

This works perfect in Chrome and Internet Explorer. In Firefox, you cannot type, because the input loses focus.

Any help is appreciated!

Upvotes: 3

Views: 1102

Answers (2)

Tyler
Tyler

Reputation: 89

Sorry! I found out the problem was in a completely different area of the code. The above code worked fine.

My error was that when I was applying my styles I had a random focus(). I am not sure why it still worked in Chrome, but crisis averted.

Thanks for the input!

Upvotes: 0

Odif Yltsaeb
Odif Yltsaeb

Reputation: 5666

I have a guess. It's just a guess, because you do not show everything that is going on.

Your problems come from not understanding how React works. Try this:

  • myArray probably comes from state or props. Use setState() to update the contents of myArray instead doing myArray[i].name = event.target.value; within onChange. Or if it comes from props, then use redux to update them.
  • you probably use props.updateState to trigger rerendering of the component. This should not be necessary if you things described in previous point.

Upvotes: 1

Related Questions