puck icon indicating copy to clipboard operation
puck copied to clipboard

Using refs for slots with inline mode doesn't work in the Puck AI canary

Open FedericoBonel opened this issue 4 weeks ago • 0 comments

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

  1. Render the Puck editor with a config that uses a slot field and inline mode, passing the dragRef to 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} />
      ),
    },
  },
};
  1. Navigate to the Puck editor.
  2. Drag and drop a SomeSlot component.

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

FedericoBonel avatar Nov 26 '25 03:11 FedericoBonel