Bubble Menu shows up without a selection when the order of editor changes in DOM

[sibiraj-sr]

What’s the bug you are facing?

Bubble Menu shows up without a selection when the order of editor changes. This is happening with @tiptap/react. Not sure if this is happening in other frameworks as well.

How can we reproduce the bug on our side?

1. Create the editor
2. Place the editors inside a loop.
3. Change the order for the editor by altering the items in the loop.

The bubble menu shows up regardless of whether the editor is action or having a selection. Attached codesanbox with the reproducible bug.

Can you provide a CodeSandbox?

https://codesandbox.io/s/eloquent-tdd-67nzs8?file=/src/index.js

What did you expect to happen?

Bubble menu should not show up unless there is a selection in the editor.

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ghost]

issue still exists.

[bdbch]

Sorry for the late answer. The sandbox does not seem to work anymore but I guess you have an array of values (ids?) and you render an editor for each? And on reorder the suggestion menu opens up?

[leerobert]

Issue still exists.

This works when you introduce a simple inline node like:

import { mergeAttributes, Node } from '@tiptap/core';

export type ChunkOptions = {
	HTMLAttributes: Record<string, any>;
};

export const Chunk = Node.create<ChunkOptions>({
	name: 'chunk',

	addOptions() {
		return {
			HTMLAttributes: {
				class:
					'rounded-md px-1 py-1 text-gray-700 bg-gray-100 hover:bg-gray-200 cursor-pointer user-select-all',
				contenteditable: false
			}
		};
	},

	group: 'inline',
	inline: true,
	selectable: true,
	draggable: true,
	atom: true,

	addAttributes() {
		return {
			id: {
				default: null,
				parseHTML: (element) => element.getAttribute('data-id'),
				renderHTML: (attributes) => {
					if (!attributes.id) {
						return {};
					}

					return {
						'data-id': attributes.id
					};
				}
			},

			label: {
				default: null,
				parseHTML: (element) => element.getAttribute('data-label'),
				renderHTML: (attributes) => {
					if (!attributes.label) {
						return {};
					}

					return {
						'data-label': attributes.label,
						title: attributes.label
					};
				}
			},

			value: {
				default: null,
				parseHTML: (element) => element.getAttribute('data-value'),
				renderHTML: (attributes) => {
					if (!attributes.value) {
						return {};
					}

					return {
						'data-value': attributes.value
					};
				}
			}
		};
	},

	parseHTML() {
		return [
			{
				tag: `span[data-type="${this.name}"]`
			}
		];
	},

	renderHTML({ HTMLAttributes, node }) {
		return [
			'span',
			mergeAttributes({ 'data-type': this.name }, this.options.HTMLAttributes, HTMLAttributes),
			node.attrs.value
		];
	}
});

into the editor.

Then try dragging the node with a BubbleMenu. The bubble menu will appear.

[deviprsd]

Not sure if it totally related, I also have a react component that does additional wrapping, that has a div with contenteditable: false on the right toolbar. Clicking on it multiple times brings up the bubble menu.

I tried to capture it and prevent it from bubbling up further, but that didn't work. The solution that worked the most but had its issues is setting pointer-events: none but that displays the text cursor that I cannot override, and disables events of the children