basecamp/trix · warning

This browser does not support the willValidate property for

Error message

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

What it means

The willValidate getter is a stub that warns and returns false when the browser does not support form-associated custom elements. Code using willValidate to decide whether to run native validation will skip the trix-editor entirely. Non-fatal console warning.

Source

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

  }

  set required(value) {
    console.warn("This browser does not support the [required] attribute for trix-editor elements.")
  }

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

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

    return ""
  }

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

    return false
  }

  formDisabledCallback(value) {
  }

  setFormValue(value) {
  }

  checkValidity() {
    console.warn("This browser does not support checkValidity() for trix-editor elements.")

    return true
  }

  reportValidity() {
    console.warn("This browser does not support reportValidity() for trix-editor elements.")

View on GitHub (pinned to 4700401311)

Solutions

  1. Do not rely on willValidate for trix-editor; always run your own validation for its value.
  2. Feature-detect form-associated support and provide custom validation when false.
  3. Skip/accept the warning; returning false safely degrades to 'no native validation'.
  4. Update your browser support baseline to one where willValidate is meaningful.

Example fix

// before
if (!field.willValidate) return;
validate(field);
// after
const willValidate = field.willValidate ?? field.tagName !== 'TRIX-EDITOR';
if (!willValidate) validateTrixManually(field); else validate(field);
Defensive patterns

Strategy: validation

Validate before calling

// do not gate on willValidate for trix-editor:
if (editor.tagName === 'TRIX-EDITOR' || editor.willValidate) {
  runValidation(editor);
}

Type guard

function willValidateNatively(el) {
  return Boolean(el.willValidate) && 'ElementInternals' in window;
}

Try / catch

const will = willValidateNatively(editor);
if (will) { editor.checkValidity(); } else { customValidate(editor); }

Prevention

When it happens

Trigger: Reading 'trixEditor.willValidate' in validation pipelines that check whether a control will be natively validated, in unsupported browsers, executing the stub at trix_editor_element.js:341-345.

Common situations: Frameworks/libraries that branch on willValidate before calling checkValidity; older Safari/Firefox deployments; progressive-enhancement code paths.

Related errors


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