puck
puck copied to clipboard
Using refs for slots with inline mode doesn't work in the Puck AI canary
Description
When using inline mode in components in the Puck canary and pass the dragRef to a slot render function, Puck throws an error.
This does not happen in the latest stable Puck version.
Environment
- Puck version: 0.21.0-canary.c0db75c1
Steps to reproduce
- Render the Puck editor with a config that uses a slot field and inline mode, passing the
dragRefto the slot render function or component:
export const config = {
components: {
SomeSlot: {
fields: {
content: { type: "slot" },
},
inline: true,
render: ({ content: Content, puck }) => (
<Content style={{ height: "fit-content" }} ref={puck.dragRef} />
),
},
},
};
- Navigate to the Puck editor.
- Drag and drop a
SomeSlotcomponent.
What happens
An error is thrown:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This does not happen when the dragRef is passed to a different component or element that is not the slot render function.
What I expect to happen
The slot should render as expected, the same way it does in the latest stable version.
Additional Media
https://github.com/user-attachments/assets/bbac20af-6804-4458-93c1-b37057d5d48f