losing focus on rerender

How do I prevent this?
https://github.com/TanStack/table/issues/1346 I read these issues and the solutions don't work for me

It's important to point out that this only happens if I call setSomeZustandState(value), if I call it with null, I keep the focus

This my cell:

columnHelper.accessor('column', {
      header: 'column',
      cell: () => {
        return (
          <div
            tabIndex={0}
            onKeyDown={(e) => {
              console.log('keydown')
            }}
            onFocus={() => {
              console.log('focus')
            }}
            onClick={(e) => {
                setSomeZustandState(value)
              }
            }}
          >
            test
          </div>
        )
      }
    }),

columnHelper.accessor('column', {
      header: 'column',
      cell: () => {
        return (
          <div
            tabIndex={0}
            onKeyDown={(e) => {
              console.log('keydown')
            }}
            onFocus={() => {
              console.log('focus')
            }}
            onClick={(e) => {
                setSomeZustandState(value)
              }
            }}
          >
            test
          </div>
        )
      }
    }),

columnHelper.accessor('column', {
      header: 'column',
      cell: () => {
        return (
          <div
            tabIndex={0}
            onKeyDown={(e) => {
              console.log('keydown')
            }}
            onFocus={() => {
              console.log('focus')
            }}
            onClick={(e) => {
                setSomeZustandState(value)
              }
            }}
          >
            test
          </div>
        )
      }
    }),

columnHelper.accessor('column', {
      header: 'column',
      cell: () => {
        return (
          <div
            tabIndex={0}
            onKeyDown={(e) => {
              console.log('keydown')
            }}
            onFocus={() => {
              console.log('focus')
            }}
            onClick={(e) => {
                setSomeZustandState(value)
              }
            }}
          >
            test
          </div>
        )
      }
    }),

GitHub

Lose focus on input in a cell · Issue #1346 · TanStack/table

Describe the bug In version 6.9, we lose focus on input fields in cell on keystroke. To Reproduce Go to this sandbox link to reproduce the behavior https://codesandbox.io/s/reacttable-cell-renderer...

losing focus on rerender

Similar Threads

Similar Threads

Similar Threads