From 91bbbeda304360e996c589ff8b9ec189700f0102 Mon Sep 17 00:00:00 2001
From: fantactuka <fantactuka@gmail.com>
Date: Tue, 3 Dec 2024 11:38:23 -0500
Subject: [PATCH] Warn about display: flex container for the editor

---
 packages/lexical/src/LexicalEditor.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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