[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):
<input type="text"> - Valid (required):
<input type="text" required> - Invalid (not required):
<input type="text" required="false"> - Invalid (required):
<input type="text" required="true">
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 Components needs a removeAttribute function to handle this.
Sorry, but in a rush, so I'll provide fiddle on Monday...
Answers (3)
@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.
probably the same as https://github.com/artf/grapesjs/issues/912#issuecomment-373208517
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1658
[BUG] Checkbox trait does not load as checked even when the trait value is true
Hi, I'm using Grapesjs version 0.14.33. I'm loading some components when the form loads and I have a component with a checkbox trait. When...
Issue #1930
[QUESTIONS] change 2 attributes with 1 trait
I have an input trait, I want to change the 2 attributes (name and type) on the selected input element, on canvas is appropriate, but in th...
Issue #1894
[BUG] Custom Trait documentation example doesn't work
Specifically this: https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type First of all, the keyUp event references onChange wh...
Issue #1324
Remove attributes from a component
Hi @artf I don't know if it is possible to remove an attribute from a component. In our project I'm injecting a custom attribute from a cus...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.