[Bug]: EditorContent refs merged incorrectly

[ghaikanav]

Affected Packages

react

Version(s)

2.9.1

Bug Description

I have 3 tip tap editors on a page for a use case of mine, each of them has a ref attached to it, and an event listener to listen clicks.

 const handleClick = (event: MouseEvent) => {
    const element = event.target as HTMLElement;
    console.log("something clicked");
  };

 useEffect(() => {
    const currentEditorRef = editorRef.current;
    console.log("currentEditorRef", currentEditorRef);

    if (currentEditorRef) {
      currentEditorRef.addEventListener("click", handleClick);
    }

    return () => {
      if (currentEditorRef) {
        currentEditorRef.removeEventListener("click", handleClick);
      }
    };
  }, [editorRef]);

<EditorContent
    ref={editorRef}
    name={name}
    editor={tipTapEditor}
/>

All the logs point to a given editor and only when I click that given editor something gets logged. But if I wrap the <EditorContent /> in a div and attach refs to the divs, all works properly.

<div ref={editorRef}>
  <EditorContent
    name={name}
    editor={tipTapEditor}
  />
</div>

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

Each <EditorContent/> should behave like any other div when a ref is attached to it, no matter how many instances of it are present in the document.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.