React input loses focus when user types into it

Question

https://github.com/tannerlinsley/react-table/issues/3111

https://codesandbox.io/s/modest-booth-hei5d?fontsize=14&hidenavigation=1&theme=dark

using react hook components when i'm using an input cell during the onchange event, the state change causes the component to refresh and the input field to lose focus. i looked at the github link posted above, but not results from the recommended fix on react-table v6. im on react-table 7.6.3

const handleInitialDemandChange = (cell, e) => {
    const name = cell.row.original.id
    e.persist();
    setFieldValues({
      ...fieldValues,
      [name]: e.target.value
    });
  }

  function renderCells(cell) {
    console.log(cell.row)
    return (
      <div key={cell.row.original.id}>
        {cell.row.original.id == 0 ?
        <input style={{color: '#627FE3'}} value={cell.value} disabled /> :
        <input style={{color: '#627FE3'}}
          value={fieldValues[cell.row.original.id]} 
          onChange={(e) => handleInitialDemandChange(cell, e)}
        />}
      </div>
    )
  }

my component code

<MyReactTable id="myReactTable" columns={[
          {
            Header: '',
            id: 'id',
            accessor: () => {},
            Cell: ({ cell }) => 
              <div style={{color: '#627FE3', display: 'flex', alignItems:'center'}}>
                {cell.row.canExpand ? (
                  <>
                    {
                      cell.row.isExpanded ?
                      <img
                        alt="expand"
                        src="/images/icons/expand.svg"
                        {...cell.row.getToggleRowExpandedProps({
                          style: {
                            paddingLeft: `${cell.row.depth * 2}rem`
                          }
                        })}
                        height="30"
                        width="30"
                      /> : <img
                        alt="collapse"
                        src="/images/icons/collapse.svg"
                        {...cell.row.getToggleRowExpandedProps({
                          style: {
                            paddingLeft: `${cell.row.depth * 2}rem`
                          }
                        })}
                        height="30"
                        width="30"
                      />
                    }
                  </>
                ) : null}
              </div>
          },
          {
            Header: 'Item',
            accessor: 'item'
          },
          {
            Header: 'Amount Paid',
            accessor: 'amount_paid',
            Cell: ({ cell }) => (
              <p style={{color: '#627FE3', cursor:'pointer', margin:0}} >
                {cell.row.values.amount_paid}
              </p>
            )
          },
          {
            Header: 'Initial Demand',
            accessor: 'initial_demand',
            Cell: ({cell}) => (renderCells(cell))
          },
    ]} data={round1Summary || []}/>

MyReactTable.js

import React from 'react'

import CssBaseline from '@material-ui/core/CssBaseline'
import MaUTable from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'

import { useTable, useSortBy, useExpanded } from 'react-table'

import './index.css'

const MyReactTable = props => {
  const { columns, data, key, ...rest } = props;
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useSortBy,
    useExpanded
  )
  return (
    <div>
      <CssBaseline />
        <MaUTable key={key} {...getTableProps()}>
          <TableHead>
            {headerGroups.map(headerGroup => (
              <TableRow {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render('Header')}
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? ' 🔽'
                          : ' 🔼'
                        : ''}
                    </span>
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableHead>
          <TableBody>
            {rows.map((row, idx) => {
              prepareRow(row)
              return (
                <TableRow {...row.getRowProps()}>
                  {row.cells.map((cell, idx2) => {
                    return (
                      <TableCell {...cell.getCellProps()}>
                        {cell.render('Cell')}
                      </TableCell>
                    )
                  })}
                </TableRow>
              )
            })}
          </TableBody>
        </MaUTable>
    </div>
  )
}

export default MyReactTable

lissettdm · Accepted Answer · 2021-02-26 19:14:44Z

1

I think the problem is here:

{cell.row.original.id == 0 ?
 <input style={{color: '#627FE3'}} value={cell.value} disabled /> :
 <input style={{color: '#627FE3'}}
  value={fieldValues[cell.row.original.id]} 
  onChange={(e) => handleInitialDemandChange(cell, e)}
 />
}

Try to create one input:

 <input style={{color: '#627FE3'}}
    value={cell.row.original.id == 0 ? fieldValues[cell.row.original.id]: cell.value} 
    onChange={(e) => handleInitialDemandChange(cell, e)}
    disabled={cell.row.original.id == 0}
 />

answered Feb 26, 2021 at 19:14

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vee Over a year ago

no still happens after changing it to that

lissettdm Over a year ago

Can you create a working example?, it is hard to detect where the problem is

lissettdm Over a year ago

Try to set the input focus after calling setFieldValues..e.target.focus(); Just for testing purpose.

vee Over a year ago

let me sandbox this,

lissettdm Over a year ago

Yes, this function render is not working as expected cell.render('Cell'), you can try with cell.column.Cell(cell), or render Cell as Component, see github.com/tannerlinsley/react-table/blob/…

Collectives™ on Stack Overflow

React input loses focus when user types into it

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related