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?

Dorotheadorothee

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

Alleviator

(sorry for now putting more code and less links, but I need to get going, I'll probably add more stuff to it once I get back home. But all in all, the answer explains the issue and provides some pointers.) – Alleviator

This is excellent but slight issue, when using the hooks way I also have buttons on my table. The rerender from onBlur causes buttons in my table to miss click events. I will try making it run async – Dorotheadorothee

I wonder what causes this... do you have a working example somewhere so I can take a look? – Alleviator

Actually this is a different but related issue so i put it in a new question: #57435742 – Dorotheadorothee

Answer 2

Adding autoFocus to input worked for me.

Byrle

Answer 3

I had the same issue.

If you can use useRef instead of useState for state handle, you can quickly fix this issue which re-rendering or unmounting.

refer this: https://blog.bitsrc.io/5-ways-to-avoid-react-component-re-renderings-90241e775b8c#:~:text=useState()%20Hook%20is%20widely,without%20causing%20component%20re%2Drenderings.

Mikael