This browser does not support the .form property for trix-ed

Error message

This browser does not support the .form property for trix-editor elements.

What it means

The trix-editor custom element's form getter warns and returns null when the browser lacks support for the HTMLFormElement-associated .form property on form-associated custom elements (ElementInternals/formAssociated). It is a capability fallback, not a thrown exception.

Source

Thrown at src/trix/elements/trix_editor_element.js:295

  get labels() {
    const labels = []
    if (this.element.id && this.element.ownerDocument) {
      labels.push(...Array.from(this.element.ownerDocument.querySelectorAll(`label[for='${this.element.id}']`) || []))
    }

    const label = findClosestElementFromNode(this.element, { matchingSelector: "label" })
    if (label) {
      if ([ this.element, null ].includes(label.control)) {
        labels.push(label)
      }
    }

    return labels
  }

  get form() {
    console.warn("This browser does not support the .form property for trix-editor elements.")

    return null
  }

  get name() {
    console.warn("This browser does not support the .name property for trix-editor elements.")

    return null
  }

  set name(value) {
    console.warn("This browser does not support the .name property for trix-editor elements.")
  }

  get disabled() {
    console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")

    return false

View on GitHub (pinned to 4700401311)

Solutions

Feature-detect: check that editorElement.form !== null or use closest('form') as fallback.
Update the browser or use a form-associated custom elements polyfill.
Use editorElement.closest("form") instead of .form for compatibility.
Upgrade Trix to the latest version and ensure the element is registered/upgraded before access.

Example fix

// before
const form = editor.form
// after
const form = editor.form || editor.closest("form")

Defensive patterns

Strategy: fallback

Validate before calling

const supportsFormProperty = "ElementInternals" in window && ("form" in (new ElementInternals?.constructor?.prototype ?? {}))
// or simply:
const hasForm = (el) => el.form != null

Type guard

function getEditorForm(editor) {
  return editor instanceof HTMLElement && editor.form != null ? editor.form : editor.closest("form")
}

Try / catch

let form = null
try {
  form = editor.form
} catch (e) {
  form = null
}
if (!form) form = editor.closest("form")

Prevention

Always fall back to closest("form") when .form is null.
Test Trix forms in your oldest supported browsers.
Keep Trix updated so form-associated support tracks modern engines.

When it happens

Trigger: Accessing editorElement.form in a browser without form-associated custom element support (older Safari/Firefox lacking ElementInternals.form), or before the polyfill/custom-element registration upgrades support.

Common situations: Older browser targets or embedded webviews; reading .form in feature-detection-free code; caches serving old trix builds to modern browsers.

Related errors

AI-assisted analysis of basecamp/trix@4700401311 (2026-09-02). Data as JSON: /api/errors/0620cf82df56fc15. Report an issue: GitHub.