[BUG]: Checkbox trait doesn't remove attribute when unchecked

Question

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. Valid (not required): Valid (required): Invalid (not required): Invalid (required): When the HTML grapes is then rendered outside Grapes and the input is checked if it's required, this fails as Chrome always returns true is the required attributes is set... regardless of the value. I've been looking into this myself but not figure it out yet but it looks like Co...

nojacko · Accepted Answer

@artf Thanks for the quick solution but it doesn't appear to work. Both inspecting the Grapes source and calling getHtml() return required="true" and required="false". I'm guessing because the attribute is a boolean value represented as a string. I will where I can but, unfortunately, I'm on an unusual tight schedule for the GDPR rules coming in.

artf · Answer

probably the same as https://github.com/artf/grapesjs/issues/912#issuecomment-373208517

mikereem · Answer

I think commit 9a71368 is not enough. It writes boolean attributes without their values to the html output fine. But when the output is read again by the editor, then the boolean attributes are not initialized. If the boolean attribute was shown in the html (which means the value is true), then the editor initializes this attribute with value: "" and not true.

Checkbox trait doesn't remove attribute when unchecked

Question

Answers (3)

Related Questions and Answers

[BUG] Checkbox trait does not load as checked even when the trait value is true

[QUESTIONS] change 2 attributes with 1 trait

[BUG] Custom Trait documentation example doesn't work

Remove attributes from a component

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories