Почему пропадает фокус с инпута при изменении состояние useState?

Question

[ivan_ivanov_ivanych]

Есть таблица с тремя инпутами в строке.Есть функция, которая при change меняет состояние и значение инпута в таблице.
Проблема в том, что во всех первых инпутах (со значением from) после ввода 1 символа пропадает фокус.
Причем именно в первых. Второй и трутий инпут принимает значение без ограничений
Кусок кода инпутами:

data.map((item, index) => {
                return (
                 <CTableRow key={item.from}>
                    <CTableDataCell>
                      //Проблемный инпут  
                      <CFormInput defaultValue={item.from}
                          onChange={(e) => changeData(e, item.id, 'from')}
                          invalid={invalidItem === index}
                        />
                      
                    </CTableDataCell>
                    <CTableDataCell>
                          <CFormInput defaultValue={item.to}
                            onChange={(e) => changeData(e, item.id, 'to')}
                            invalid={invalidItem === index}
                          />
                    </CTableDataCell>
                    <CTableDataCell>
                          <CFormInput defaultValue={item.coefficient}
                            onChange={(e) => changeData(e, item.id, 'coefficient')}
                            />
                      }

                  </CTableRow>
              )})

и сама функция onChange:

const [data, setData] = useState([]);

  const changeData = (e, id, key) => {
    e.target.value = e.target.value.replace(/[^\d.]/g, '');
    const value = e.target.value;
    switch (key) {
      case 'from': {
        setData(data.map(item => {
          return item.id === id ? {...item, from: Number(value)} : item
        }))
        break
    // здесь пропадает фокус с элемента
      }
      case 'to': {
        setData(data.map(item => {
          return item.id === id ? {...item, to: Number(value)} : item
        }))
        break
      }
      case 'coefficient': {
        setData(data.map(item => {
          return item.id === id ? {...item, coefficient: Number(value)} : item
        }))
        break
      }
      default: console.log(key)
    }
  }

Comments

[Александр]

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

[ivan_ivanov_ivanych]

Александр, реф не подходящий вариант, так как эти элементы проходят рендер через map.
А если дело в использовании setData, то почему тогда во втором и третьем инпуте фокус не пропадает?

Answer 1

[Alexandroppolus]

Когда печатаешь в первом инпуте, меняется item.from. А он у тебя используется как key для CTableRow. При изменении ключа компонент не обновляется, а перемонтируется (т.е. сносится полностью и создается заново). Возможно, ты хотел для key использовать item.id? тогда было бы норм.

Comments

[ivan_ivanov_ivanych]

Да. проблема была именно в key для компонента в map. Спасибо!