Cursor jumps to end in controlled custom input fields

[rinormhi]

Description

When using custom fields with a controlled <input> element (i.e. passing a value prop), the cursor jumps to the end of the input on every keystroke. This makes editing text inside custom fields quite frustrating, as it's only really possible to append characters at the end.

Environment

Puck version: 0.21.2
Browser version: Chrome 135 (desktop)
Additional environment info: Next.js 16, React 19, Turbopack

Steps to reproduce

1. Create a custom field with a controlled <input>:

const MyTextField = ({ id, onChange, value }: CustomFieldProps<string>) => {
  return (
    <input
      id={id}
      onChange={(e) => onChange(e.target.value)}
      value={value}
    />
  )
}

2. Register it as a custom field in the Puck config:

const config = {
  components: {
    MyComponent: {
      fields: {
        title: {
          type: "custom",
          render: (props) => <MyTextField {...props} />,
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
}

Open the editor, select MyComponent, and try typing somewhere in the middle of an existing value in the title field.

What happens

The cursor jumps to the end of the input after each keystroke, making it impossible to edit text in place.

What I expect to happen

The cursor should remain at the position where the character was inserted, consistent with standard browser behavior for text inputs.

Additional Media

Bildschirmaufnahme.2026-04-16.um.11.11.52.mov

[FedericoBonel]

Hey @rinormhi! Thanks for reporting this. I can confirm that I am able to reproduce it.

It looks like this was introduced in Puck 0.21.0 as I can't reproduce it with 0.20.x.

We did a major refactor of fields for performance in 0.21, so that may be the culprit. I'll mark this as ready.