Reputation: 1398
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.
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
Reputation: 4712
Here is a quick hack to never lose focus
<input
type="text"
autoFocus={true}
onBlur={(e) => e.currentTarget?.focus()}/>
Upvotes: 0
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
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