Warn about "display: flex" container for the editor (#6901)

facebook · Dec 3, 2024 · b7fa4cf · b7fa4cf
1 parent a9dfc93
commit b7fa4cf
Showing 1 changed file with 13 additions and 0 deletions.
diff --git 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