{"record":{"id":"bba72bae7d583868","repo":"basecamp/trix","slug":"this-browser-does-not-support-the-disabled-attri","errorCode":null,"errorMessage":"This browser does not support the [disabled] attribute for trix-editor elements.","messagePattern":"This browser does not support the \\[disabled\\] attribute for trix-editor elements\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/trix/elements/trix_editor_element.js","lineNumber":311,"sourceCode":"\n  get form() {\n    console.warn(\"This browser does not support the .form property for trix-editor elements.\")\n\n    return null\n  }\n\n  get name() {\n    console.warn(\"This browser does not support the .name property for trix-editor elements.\")\n\n    return null\n  }\n\n  set name(value) {\n    console.warn(\"This browser does not support the .name property for trix-editor elements.\")\n  }\n\n  get disabled() {\n    console.warn(\"This browser does not support the [disabled] attribute for trix-editor elements.\")\n\n    return false\n  }\n\n  set disabled(value) {\n    console.warn(\"This browser does not support the [disabled] attribute for trix-editor elements.\")\n  }\n\n  get required() {\n    console.warn(\"This browser does not support the [required] attribute for trix-editor elements.\")\n\n    return false\n  }\n\n  set required(value) {\n    console.warn(\"This browser does not support the [required] attribute for trix-editor elements.\")\n  }\n","sourceCodeStart":293,"sourceCodeEnd":329,"githubUrl":"https://github.com/basecamp/trix/blob/470040131122bd44e269b4de0f2e9557f90ec994/src/trix/elements/trix_editor_element.js#L293-L329","documentation":"Trix's trix-editor custom element implements form-participation APIs (disabled, required, validity, etc.) as no-op fallbacks for browsers that do not support form-associated custom elements (HTMLElement 'formassociated'). Accessing or setting 'disabled' on a trix-editor in a browser without that support hits the fallback getter/setter, which logs this console warning and returns false. It is a non-fatal capability warning, not a thrown exception.","triggerScenarios":"Reading 'editor.disabled' or assigning 'editor.disabled = true' (or calling setAttribute('disabled', ...)) on a trix-editor element in a browser lacking form-associated custom element support, which causes the stub get/set disabled accessors at trix_editor_element.js:310-318 to run.","commonSituations":"Apps using Trix inside older Safari/Firefox versions (pre form-associated custom elements), feature detection gaps in form code that toggles editor disabled state, and tests running in browsers or environments without ElementInternals form support.","solutions":["Upgrade/require a browser with form-associated custom elements support (Chrome 77+, Firefox 93+, Safari 16.4+) so the native behavior is used.","Treat the warning as expected noise: the accessors safely return false and never throw; filter the warning in dev tooling if it clutters logs.","Stop relying on the DOM [disabled] attribute for trix-editor; gate editor interaction yourself (e.g., toggle 'contenteditable'/'readonly' or hide the editor) when form-association is unsupported.","Wrap editor disabled-state logic in a capability check: CSS.supports or presence of HTMLElement accessibility to form association, falling back to manual enable/disable code."],"exampleFix":"// before\neditor.disabled = isSaving;\n// after\nif ('form' in HTMLElement.prototype && supportsFormAssociated()) {\n  editor.disabled = isSaving;\n} else {\n  editor.setAttribute('contenteditable', isSaving ? 'false' : 'true');\n}","handlingStrategy":"fallback","validationCode":"const supportsFormAssociated = () =>\n  typeof HTMLElement !== 'undefined' &&\n  Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'disabled') === false &&\n  ('ElementInternals' in window);\n// guard: only set editor.disabled when ElementInternals form-association is available\nif (!('ElementInternals' in window)) { /* use manual disable path */ }","typeGuard":"function canUseNativeFormDisabled(el) {\n  return el instanceof HTMLElement && 'ElementInternals' in window && 'form' in el;\n}","tryCatchPattern":"try {\n  editor.disabled = isSaving;\n} catch (e) {\n  console.debug('form-associated unsupported, using manual disable');\n  editor.contentEditable = isSaving ? 'false' : 'true';\n}","preventionTips":["Feature-detect 'ElementInternals' in window before relying on native form APIs on trix-editor","Implement a manual enable/disable path (contenteditable + CSS class) as the universal fallback","Pin browser support requirements in docs/CI (Chrome 77+, Firefox 93+, Safari 16.4+)","Filter known benign console warnings in dev tooling so real issues stand out"],"tags":["browser-compatibility","custom-elements","forms","console-warning"],"backgroundTag":"form-associated-custom-element-unsupported","analyzedSha":"470040131122bd44e269b4de0f2e9557f90ec994","analyzedAt":"2026-09-02T10:19:15.878Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T16:17:10.729Z"}