{"record":{"id":"8e892d6bfca548cc","repo":"ajaxorg/ace","slug":"textarea-required","errorCode":null,"errorMessage":"Textarea required!","messagePattern":"Textarea required!","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/ext/textarea.js","lineNumber":85,"sourceCode":"    if (!ret || ret == 'auto' || ret == 'intrinsic') {\n        ret = container.style[property];\n    }\n    return ret;\n};\n\n/**\n * @param {HTMLElement} elm\n * @param {Object} styles\n */\nfunction applyStyles(elm, styles) {\n    for (var style in styles) {\n        elm.style[style] = styles[style];\n    }\n}\n\nfunction setupContainer(element, getValue) {\n    if (element.type != 'textarea') {\n        throw new Error(\"Textarea required!\");\n    }\n\n    var parentNode = element.parentNode;\n\n    // This will hold the editor.\n    var container = document.createElement('div');\n\n    // To put Ace in the place of the textarea, we have to copy a few of the\n    // textarea's style attributes to the div container.\n    //\n    // The problem is that the properties have to get computed (they might be\n    // defined by a CSS file on the page - you can't access such rules that\n    // apply to an element via elm.style). Computed properties are converted to\n    // pixels although the dimension might be given as percentage. When the\n    // window resizes, the dimensions defined by percentages changes, so the\n    // properties have to get recomputed to get the new/true pixels.\n    var resizeEvent = function() {\n        var style = 'position:relative;';","sourceCodeStart":67,"sourceCodeEnd":103,"githubUrl":"https://github.com/ajaxorg/ace/blob/2c1eddc392eb92cf222a4478f1893d2b2c354fb0/src/ext/textarea.js#L67-L103","documentation":"The ext/textarea compatibility layer transforms an existing <textarea> into an Ace editor. setupContainer() requires the passed element be a textarea; any other element type throws because the API depends on textarea semantics (value, form submission).","triggerScenarios":"Calling ace.require('ace/ext/textarea').transformTextarea(divOrInput) with a non-textarea element, or a textarea created after load whose .type isn't 'textarea'.","commonSituations":"Passing a div or input element instead of <textarea>; using the extension on dynamically created containers where the wrong node was selected.","solutions":["Pass an actual <textarea> element to the transform function","Check element.tagName/type before calling","Use the standard ace.edit() API with a div instead if you don't need textarea compatibility"],"exampleFix":"// before\ntransformTextarea(document.getElementById('editorDiv')); // a div\n// after\ntransformTextarea(document.getElementById('editorTa')); // <textarea id=\"editorTa\"></textarea>","handlingStrategy":"validation","validationCode":"var el = document.getElementById('editorTa');\nif (!el || el.type !== 'textarea') throw new Error('need a <textarea>');\nace.require('ace/ext/textarea').transformTextarea(el);","typeGuard":"function isTextarea(el) { return el != null && el.tagName === 'TEXTAREA' && el.type === 'textarea'; }","tryCatchPattern":"try { transformTextarea(el); } catch (e) { if (/Textarea required/.test(e.message)) { /* replace el with a real <textarea> */ } else throw e; }","preventionTips":["Verify element.tagName === 'TEXTAREA' before transforming","Prefer the modern ace.edit(div) API over ext/textarea","Check the selected node in dynamic DOM scenarios"],"tags":["dom","textarea","extension"],"backgroundTag":"wrong-element-type","analyzedSha":"2c1eddc392eb92cf222a4478f1893d2b2c354fb0","analyzedAt":"2026-08-30T00:39:52.222Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}