facebook/lexical · warning

When using "display: flex" or "display: inline-flex" on an e

Error message

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.

What it means

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.

Source

Thrown at packages/lexical/src/LexicalEditor.ts:1692

        $commitPendingUpdates(this);

        // TODO: remove this flag once we no longer use UEv2 internally
        if (!this._config.disableEvents) {
          addRootElementEvents(nextRootElement, this);
        }
        if (classNames != null) {
          nextRootElement.classList.add(...classNames);
        }
        if (__DEV__) {
          const nextRootElementParent = getParentElement(nextRootElement);
          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 {
        // When the content editable is unmounted we will still trigger a
        // reconciliation so that any pending updates are flushed,
        // to match the previous state change when
        // `_editorState = pendingEditorState` was used, but by
        // using a commit we preserve the readOnly invariant
        // for editor.getEditorState().
        this._window = null;
        this._updateTags.add(HISTORY_MERGE_TAG);
        $commitPendingUpdates(this);
      }

      triggerListeners('root', this, false, nextRootElement, prevRootElement);
    }

View on GitHub (pinned to 76a22dcba9)

Solutions

1. Wrap the content editable (editor root element) in an intermediate non-flex element (e.g. a plain div) inside the flex parent.
2. Change the parent's display to block/grid/inline-block if the layout allows.
3. Give the direct parent of the root a display other than flex/inline-flex via a wrapper class.
4. Ignore only if the Chrome focus quirk is acceptable and you're not targeting that interaction.

Example fix

// before
<div style={{display: 'flex'}}>
  <div ref={editorRef} contentEditable />
</div>
// after
<div style={{display: 'flex'}}>
  <div style={{display: 'block'}}>
    <div ref={editorRef} contentEditable />
  </div>
</div>

const parent = rootElement.parentElement;
if (parent && ['flex', 'inline-flex'].includes(getComputedStyle(parent).display)) {
  console.warn('Wrap the Lexical content editable in a non-flex element (Chrome focus quirk)');
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• [lexical] duplicate DOMImportRule name "${rule.name}" — keep
• message
• TableNode: hasHorizontalScroll is active but theme.tableScro
• ${name} must implement static "${method}" method
• ${name} should implement "importJSON" method to ensure JSON

AI-assisted analysis of facebook/lexical@76a22dcba9 (2026-08-31). Data as JSON: /api/errors/f22c9c68f53f689c. Report an issue: GitHub.