Autodesk / Autodesk/react-base-table
Invalid ref in NextJS
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 170
- PR merge metrics
- No merged PRs in 30d
Description
Is there a way to pass the ref to custom cell renders in NextJS environment?
The [Inline Editing](https://autodesk.github.io/react-base-table/examples/inline-editing) example in the documentation website doesn't work in NextJS because the ref provided to `EditableCell` is always null. I have tried various workarounds like loading the component dynamically and then using React.ForwardRef ([link](https://github.com/vercel/next.js/issues/4957)) but nothing seems to work. Even tried disabling SSR explicitly. The ref passed in is only valid after the first render cycle and it seems in the `EditableCell` class it tries to render with a null ref. You have some code protecting against this situation: `{editing && this.targetRef && (` but I'm wondering if there is a nicer or cleaner way to do this? I'm mainly looking for a way to edit the cell items.
Contributor guide
Research direction
Start with the Inline Editing example in the documentation site and the custom EditableCell implementation, focusing on how its ref is passed and when targetRef becomes available. Reproduce the example in a NextJS environment, then verify that cell items can be edited reliably without the ref being null during the initial render.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100