7

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?

Quinma
  • 1,436
  • 2
  • 17
  • 39

3 Answers3

12

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

Marouane Fazouane
  • 1,279
  • 14
  • 20
  • (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.) – Marouane Fazouane Aug 08 '19 at 19:41
  • 1
    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 – Quinma Aug 08 '19 at 21:59
  • I wonder what causes this... do you have a working example somewhere so I can take a look? – Marouane Fazouane Aug 09 '19 at 00:25
  • Actually this is a different but related issue so i put it in a new question: https://stackoverflow.com/questions/57435242/how-to-capture-react-events-during-a-refresh-update-due-to-a-focus-onblur-change – Quinma Aug 09 '19 at 18:24
0

Adding autoFocus to input worked for me.

www.amitpatil.me
  • 3,001
  • 5
  • 43
  • 61
0

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.

Isuru Sampath
  • 91
  • 1
  • 6