CODEWITHSUNDEEP
reactjsreact-hooks
Pumych
Pumych

Reputation: 1398

Prevent Input field to lose focus

Here is an example of code with an input field that is inserted as a component, each change in the input field loses focus. It seems that when you change the whole component is re-rendered, and those losing focus, what is the best practice for implementing a dynamic form like this, and how to prevent loss of focus here?

PS: This is a small example of a part of a more complex form, where each subsequent part of the form depends on the choice of the previous one.

CodeSandbox

import ReactDOM from 'react-dom'
import React, { useReducer } from 'react'
import Select from 'react-select'

const SELECT_UPDATED = 'INPUT_UPDATED'
const TEXT_UPDATED = 'TEXT_UPDATED'
const TEXT_UPDATED2 = 'TEXT_UPDATED2'
const INITIAL_STATE = {
  selectedType: '',
  inputText: '',
  inputText2: ''
}

let reducer = (state, action) => {
  switch (action.type) {
    case SELECT_UPDATED:
      return { ...state, selectedType: action.selectedType }
    case TEXT_UPDATED:
      return { ...state, inputText: action.inputText }
    case TEXT_UPDATED2:
      return { ...state, inputText2: action.inputText2 }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
  console.log('state: ', state)

  return (
    <div>
      <Select
        options={[{ value: 'edit_text', label: 'Edit text' }, { value: 'hide_input', label: 'Hide input' }]}
        onChange={e => dispatch({ type: SELECT_UPDATED, selectedType: e.value })}
      />
      <p/>
      <SecondStep />
    </div>
  )

  function SecondStep() {
    if (state.selectedType === 'edit_text') {
      return <div>
        <input type="text" autoFocus value={state.inputText} onChange={e => dispatch({ type: TEXT_UPDATED, inputText: e.target.value })} />
        <input type="text" autoFocus value={state.inputText2} onChange={e => dispatch({ type: TEXT_UPDATED2, inputText2: e.target.value })} />
        </div>
    } else if (state.selectedType === 'hide_input') {
      return <div>Hidden input</div>
    } else {
      return <div>NA</div>
    }
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Upvotes: 0

Views: 1448

Answers (3)

jerryurenaa
jerryurenaa

Reputation: 4712

Here is a quick hack to never lose focus

<input
type="text"
autoFocus={true}
onBlur={(e) =>  e.currentTarget?.focus()}/>

Upvotes: 0

tareq aziz
tareq aziz

Reputation: 777

You may use autoFocus attribute to your input like this

<input type="text" autoFocus value={state.inputText} onChange={e => dispatch({ type: TEXT_UPDATED, inputText: e.target.value })} />

Update

I just changed your code, below I have used here 3 input box

import ReactDOM from 'react-dom'
import React, { useReducer } from 'react'
import Select from 'react-select'

const SELECT_UPDATED = 'INPUT_UPDATED'
const TEXT_UPDATED = 'TEXT_UPDATED'
const TEXT_UPDATED1 = 'TEXT_UPDATED1'
const TEXT_UPDATED2 = 'TEXT_UPDATED2'
const INITIAL_STATE = {
  selectedType: '',
  inputText: '',
  inputText1: '',
  inputText2: '',
  autoFocus1:true,
  autoFocus2:false,
  autoFocus3:false,

}

let reducer = (state, action) => {
  console.log(action.type)
  switch (action.type) {
    case SELECT_UPDATED:
      return { ...state, selectedType: action.selectedType }
    case TEXT_UPDATED:
      return { ...state, inputText: action.inputText, autoFocus1:true, autoFocus2:false, autoFocus3:false }
    case TEXT_UPDATED1:
      return { ...state, inputText1: action.inputText1 , autoFocus1:false, autoFocus2:true, autoFocus3:false }
    case TEXT_UPDATED2:
      return { ...state, inputText2: action.inputText2 , autoFocus1:false, autoFocus2:false, autoFocus3:true }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
  console.log('state: ', state)

  return (
    <div>
      <Select
        options={[{ value: 'edit_text', label: 'Edit text' }, { value: 'hide_input', label: 'Hide input' }]}
        onChange={e => dispatch({ type: SELECT_UPDATED, selectedType: e.value })}
      />
      <SecondStep />
    </div>
  )

  function SecondStep() {
    if (state.selectedType === 'edit_text') {
      return (
        <div>
          <input type="text" autoFocus={state.autoFocus1} value={state.inputText} onChange={e => dispatch({ type: TEXT_UPDATED, inputText: e.target.value })} />
          <input type="text" autoFocus={state.autoFocus2} value={state.inputText1} onChange={e => dispatch({ type: TEXT_UPDATED1, inputText1: e.target.value })} />
          <input type="text" autoFocus={state.autoFocus3} value={state.inputText2} onChange={e => dispatch({ type: TEXT_UPDATED2, inputText2: e.target.value })} />
        </div>
      )
    } else if (state.selectedType === 'hide_input') {
      return <div>Hidden input</div>
    } else {
      return <div>NA</div>
    }
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Upvotes: 1

Yaser Awajan
Yaser Awajan

Reputation: 1

If the problem is about re-rendering, you can assign key values to components so that components that are deemed to stay after state update won't be unmounted / remounted again.

Upvotes: 0

Related Questions