{"record":{"id":"f22c9c68f53f689c","repo":"facebook/lexical","slug":"when-using-display-flex-or-display-inline-fle","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/lexical/src/LexicalEditor.ts","lineNumber":1692,"sourceCode":"\n        $commitPendingUpdates(this);\n\n        // TODO: remove this flag once we no longer use UEv2 internally\n        if (!this._config.disableEvents) {\n          addRootElementEvents(nextRootElement, this);\n        }\n        if (classNames != null) {\n          nextRootElement.classList.add(...classNames);\n        }\n        if (__DEV__) {\n          const nextRootElementParent = getParentElement(nextRootElement);\n          if (\n            nextRootElementParent != null &&\n            ['flex', 'inline-flex'].includes(\n              getComputedStyle(nextRootElementParent).display,\n            )\n          ) {\n            console.warn(\n              `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.`,\n            );\n          }\n        }\n      } else {\n        // When the content editable is unmounted we will still trigger a\n        // reconciliation so that any pending updates are flushed,\n        // to match the previous state change when\n        // `_editorState = pendingEditorState` was used, but by\n        // using a commit we preserve the readOnly invariant\n        // for editor.getEditorState().\n        this._window = null;\n        this._updateTags.add(HISTORY_MERGE_TAG);\n        $commitPendingUpdates(this);\n      }\n\n      triggerListeners('root', this, false, nextRootElement, prevRootElement);\n    }","sourceCodeStart":1674,"sourceCodeEnd":1710,"githubUrl":"https://github.com/facebook/lexical/blob/76a22dcba981b46119fcec45f935270707e26a57/packages/lexical/src/LexicalEditor.ts#L1674-L1710","documentation":"When the editor's root (content editable) element is attached and its parent element has CSS display flex or inline-flex, Lexical logs this Chrome-specific warning in dev. In Chrome, clicking outside a content editable inside a flex container can cause unexpected focusing behavior (the content editable regains focus), so Lexical suggests wrapping the content editable in a non-flex element.","triggerScenarios":"Mounting the editor (root element attach path in LexicalEditor, ~line 1692) inside a parent whose computed style display is 'flex' or 'inline-flex'; checked on root element attachment in dev builds.","commonSituations":"Layouts where the editor container itself is display:flex (very common in modern CSS layouts); embedding Lexical inside a flex toolbar/panel layout; only observed when running a dev build in Chrome.","solutions":["Wrap the content editable (editor root element) in an intermediate non-flex element (e.g. a plain div) inside the flex parent.","Change the parent's display to block/grid/inline-block if the layout allows.","Give the direct parent of the root a display other than flex/inline-flex via a wrapper class.","Ignore only if the Chrome focus quirk is acceptable and you're not targeting that interaction."],"exampleFix":"// before\n<div style={{display: 'flex'}}>\n  <div ref={editorRef} contentEditable />\n</div>\n// after\n<div style={{display: 'flex'}}>\n  <div style={{display: 'block'}}>\n    <div ref={editorRef} contentEditable />\n  </div>\n</div>","handlingStrategy":"validation","validationCode":"const parent = rootElement.parentElement;\nif (parent && ['flex', 'inline-flex'].includes(getComputedStyle(parent).display)) {\n  console.warn('Wrap the Lexical content editable in a non-flex element (Chrome focus quirk)');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never make the direct parent of the content editable display:flex/inline-flex; insert a plain block wrapper.","Check computed styles in devtools when mounting the editor inside layout containers.","Keep a shared EditorContainer component that provides the non-flex wrapper."],"tags":["console-warning","css","chrome","focus","contenteditable"],"backgroundTag":"flex-focus-quirk","analyzedSha":"76a22dcba981b46119fcec45f935270707e26a57","analyzedAt":"2026-08-31T21:45:54.792Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}