3

I am making a table base on react-table v7 and react-window. I found other question on this site with the same question but almost they are using v6 - almost difference.

Problem is the filter text field will lost focus after we type and even when we just touch the input (I know the table is re-render). But I cannot find any solution for days.

Please help and thank you very much.

Here is the code sanbox

JayK
  • 141
  • 9

1 Answers1

5

You are using uniqied() for key i.e key={uniqid()}. So on every re-render, you are creating a new id and you are assigning it to key. When key prop changes, the component are not re-rendered, but it is re-mounted. Therefore focus is lost.

Below should work. 

<div {...getTableProps()} className={css.table} style={{ ...styles }}>
          <div className={css.thead}>
            {headerGroups.map((headerGroup, index) => (
              <div
                key={index}
                {...headerGroup.getHeaderGroupProps()}
                className={css.heading + " " + css.tr}
              >
                {headerGroup.headers.map((column, i) => (
                  <div
                    key={i}
                    className={
                      css.th + " " + (column.fixedWidth ? css.fixed__width : "")
                    }
                    style={{ ...getCellStyles(column) }}
                  >
                    <div className={css.th__inner}>
                      <div {...column.getHeaderProps()}>
                        <div

Working copy of code is here:

https://codesandbox.io/s/table-key-issue-bpkly

Quick note - In the above code, you can use a unique value that remains constant throughout the render cycle. For demo sake, I have used index.

gdh
  • 13,114
  • 2
  • 16
  • 28