Input data:

{
  parts: [
    {
      id: "part-1",
      type: "part",
      items: [
        {
          type: "content",
          tag: "b",
          content: "Hello",
        },
        {
          type: "content",
          tag: "br",
        },
        {
          type: "content",
          tag: "b",
          content: "World!",
        },
      ],
    },
  ]
}

From this json we drove several times using the type=”part”. As you enter, they change json and react to its changes. Code available in sandbox. This approach is fine when working with normal input. But if you press Enter, then a new node is created, and for some reason, when re-rendering according to the list, when saving from the input data, the old text node remains, and so on ad infinitum. I would be very grateful for a detailed answer and solution to this problem.

If you add a unique key to each “part”, for example using crypto.randomUUID(), then with each input all “parts” are re-rendered and focus is lost. The same thing happens if you cause re-rendering of elements in other ways.