Autodesk / Autodesk/react-base-table

Invalid ref in NextJS

Open
#387 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.