If we give "<input data-gjs-type="myInput" type="text" required/>" this html string to setComponents, it sets it like "<input data-gjs-type="myInput" type="text" required=""/>" in code manager
For now, you can avoid it only by adding the Component Definition in this way but I'll update the HTML parser in the next release to handle this properly
Read full answer below ↓Question
editor.setComponents("html stiring"), method which takes html string as an input and sets that code in the html section in the Code Manager
if we pass ,<input data-gjs-type="myInput" type="text" required/>" to editor.setComponents,
then its output will be "<input data-gjs-type="myInput" type="text" required=""/>
If you see setComponents is adding extra strings to required tag , it happens with every single attribute like autofocus, disabled and all othe single boolean tags?
is there any way to avoid this?
Answers (1)
For now, you can avoid it only by adding the Component Definition in this way
editor.addComponents({
tagName: 'input',
attributes: { type: 'text', required: true }
})
but I'll update the HTML parser in the next release to handle this properly
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2819
[Question] I am updating trait using addTrait function? It updates and adds the trait in trait manager but unable to reflect it in html section of codeManager?
I have written the following code - const component = editor.getSelected(); component.addTrait({ name: 'traitName', type: 'text', label: 't...
Issue #943
[BUG]: Checkbox trait doesn't remove attribute when unchecked
When html attributes are true or false, the should either exist or not exist. For example, required. This don't have a value in HTML5. Vali...
Issue #5503
replaceWith method doesn't have string type
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link none Describ...
Issue #2807
[Bug]: Starting editor "fromElement" creates components inside tag with data-gjs-type="text"
Hi, I'm currently trying to start the editor "fromElement", setting the following html inside the container: But when executed, grapesjs cr...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.