diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts index 02be308ba84..1a67571c1a0 100644 --- a/packages/lexical/src/LexicalEditor.ts +++ b/packages/lexical/src/LexicalEditor.ts @@ -1070,6 +1070,19 @@ export class LexicalEditor { if (classNames != null) { nextRootElement.classList.add(...classNames); } + if (__DEV__) { + const nextRootElementParent = nextRootElement.parentElement; + if ( + nextRootElementParent != null && + ['flex', 'inline-flex'].includes( + getComputedStyle(nextRootElementParent).display, + ) + ) { + console.warn( + `When using "display: flex" or "display: inline-flex" on an element containing content editable, Chrome may have unwanted focusing behavior when clicking outside of it. Consider wrapping the content editable within a non-flex element.`, + ); + } + } } else { // If content editable is unmounted we'll reset editor state back to original // (or pending) editor state since there will be no reconciliation