Android + Decoration.inline + GBoard: Selection handles disappear during highlighting

Hi everyone!

We’ve run into an issue using Decoration.inline on Android in combination with GBoard.

The problem occurs when we try to highlight the user’s text selection by applying Decoration.inline to the selected range. This works perfectly on iOS and desktop browsers. However, on Android, as soon as you start selecting text, the selection handles disappear or get reset while dragging.

We suspect this happens because updating the DOM during an active selection (with Decoration.inline) causes the browser to lose track of the selection state.

Has anyone else encountered this behavior and found a workaround or a stable solution for Android?

We’d be really grateful for any shared experience or advice — thanks!

Here’s the code where we apply Decoration.inline, as well as a visual demonstration of the issue:

decorations(state: EditorState): DecorationSet | null {
	if (state.selection.empty || 'node' in state.selection) return null;

	return DecorationSet.create(state.doc, [
		Decoration.inline(state.selection.from, state.selection.to, {
			class: constants.class,
			nodeName: 'span',
		}),
	]);
}
2 Likes

Does anyone have any thoughts?