MultiRootEditor will trigger an additional onChange event when using @radix-ui/react-dropdown-menu

[oonxt]

with @radix-ui/dropdown-menu:

All editable elements are disappeared

without:

here is the code

import MultiRootEditorRichDemo from "./editor";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import {HamburgerMenuIcon} from "@radix-ui/react-icons";
function App() {

    const multiRootEditorContent = {
        intro: '<h2>Sample</h2><p>This is an instance of the ' +
            '<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">multi-root editor build</a>.</p>',
        content: '<p>It is the custom content</p><figure class="image"></figure>',
        outro: '<p>You can use this sample to validate whether your ' +
            '<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>'
    };

    const rootsAttributes = {
        intro: {
            row: '1',
            order: 10
        },
        content: {
            row: '1',
            order: 20
        },
        outro: {
            row: '2',
            order: 10
        }
    };
    return (
        <>
            <DropdownMenu.Root>
                <DropdownMenu.Trigger asChild>
                    <button className="IconButton" aria-label="Customise options">
                        <HamburgerMenuIcon />
                    </button>
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal>
                    <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
                        <DropdownMenu.Item className="DropdownMenuItem">
                            New Tab <div className="RightSlot">⌘+T</div>
                        </DropdownMenu.Item>
                    </DropdownMenu.Content>
                </DropdownMenu.Portal>
            </DropdownMenu.Root>
            <MultiRootEditorRichDemo data={multiRootEditorContent} rootsAttributes={rootsAttributes}/>
        </>
    )
}

export default App

[Witoso]

Could you describe in details what's the problem is and the expected outcomes. It's hard to understand and judge from the screenshots. Thanks!

[oonxt]

ok.

The problem is this: If we use MultiRootEditor alone, it is ok. But if we also use @radix-ui/react-dropdown-menu at the same time, all edit boxes will disappear.

The steps to reproduce are as follows:

1. Add a MultiRootEditorRichDemo from the sample code. https://github.com/ckeditor/ckeditor5-react/blob/master/demo-multiroot-react-18/src/MultiRootEditorRichDemo.tsx At this time, you will see 2 event callbacks on the console:

and everything goes well.

2. import @radix-ui/react-dropdown-menu, like this:

import MultiRootEditorRichDemo from "./editor";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import {HamburgerMenuIcon} from "@radix-ui/react-icons";
function App() {

    const multiRootEditorContent = {
        intro: '<h2>Sample</h2><p>This is an instance of the ' +
            '<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">multi-root editor build</a>.</p>',
        content: '<p>It is the custom content</p><figure class="image"></figure>',
        outro: '<p>You can use this sample to validate whether your ' +
            '<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>'
    };

    const rootsAttributes = {
        intro: {
            row: '1',
            order: 10
        },
        content: {
            row: '1',
            order: 20
        },
        outro: {
            row: '2',
            order: 10
        }
    };
    return (
        <>
            <DropdownMenu.Root>
                <DropdownMenu.Trigger asChild>
                    <button className="IconButton" aria-label="Customise options">
                        <HamburgerMenuIcon />
                    </button>
                </DropdownMenu.Trigger>
                <DropdownMenu.Portal>
                    <DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
                        <DropdownMenu.Item className="DropdownMenuItem">
                            New Tab <div className="RightSlot">⌘+T</div>
                        </DropdownMenu.Item>
                    </DropdownMenu.Content>
                </DropdownMenu.Portal>
            </DropdownMenu.Root>
            <MultiRootEditorRichDemo data={multiRootEditorContent} rootsAttributes={rootsAttributes}/>
        </>
    )
}

export default App

refresh the page, at this time

1. You will see 3 event callbacks in the console, 1 more onChange than normal.
2. All editable boxes disappear
3. The undo button of the toolbar will be enabled. Click undo and the disappearing edit box will appear again.

[Witoso]

@DawidKossowski could you take a look?

[DawidKossowski]

@oonxt, I used the code snippet you provided, but unfortunately, I cannot reproduce this issue:

Maybe you could use an online playground to create a reproducible example and share the link.