React-Table with hooks looses focus on input inside table?

Question

CodeSandBox: https://codesandbox.io/embed/react-table-editable-content-ggvcy

When attempting to handle input into React-table my input is losing focus so i can only type 1 character at a time.

How can i fix my render cycle to allow input?

Edit: I accidently updated the sandbox with the working version of code although it has another bug: How to capture react events during a refresh update due to a focus onBlur change?

Answer 1

The issue is quite sneaky: when you pass a "Cell" render prop to react-tables, it'll be treated as a react component. Meaning that they'll use like so: <Cell ... />. See https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/utils.js#L208 and https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/index.js#L541

What this means, is that at each render you'll create a new component renderEditable so when the display changes, the old renderEditable is unmounted and the new one will take its place. Which is unfortunate because the inner input will loose focus.

What you can do is either use the old version (no hooks) like so: https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-content/src/index.js

Or use hooks all the way in like so: https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js