BUG: Select the initial background color doesn't work
Question
Version: 0.16.18
Bug: Select the initial background color is not working
How to reproduce it: https://imgur.com/xqkt46E
Actually:
- Component's background does not changes.
Expected:
- Component's background should change to #000000
Thanks @artf !
Answers (3)
Hi @tranthanhhoa & @RJCAM,
The bug indeed only appears when specifically selecting a background color value of #000000.
Tracking it down, it is due to the background-color property's default value of 'none' being set as '' by the color input. It later gets converted to #000000 by the color picker, whereas its actual value is rgba(0, 0, 0, 0) (or transparent).
The updated value is compared to the color picker's stored value on change, & nothing is done if they are equal (hence only failing when setting it to #000000).
I think this should be fixed by setting the background-color property's default value to transparent. Which should also allow to remove the special handling of the none value in the ColorInput.
As always, I'd be happy to open a PR if this looks good to you :).
@tranthanhhoa I'm not able to reproduce this bug in the demo (same as you), it's working fine here, check this:

What did you do before?
background-color property's default value to transparent worked for me. Thank you so much @mcottret !
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4257
BUG: Background modification doesn't work for non-images
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v100 Reproducible demo link https:/...
Issue #2766
[BUG] set background-color to table/table-cell in Firefox not working
Hi Where can I reproduce it? In demo url: https://grapesjs.com/demo-newsletter-editor.html Browser info: Firefox 75.0 How can I reproduce i...
Issue #2567
[BUGS] Can't change background-color a component on FireFox
Version: 0.15.10 Bug: Can't change the background color of a component on FireFox (v73.0) How to reproduce it: Goto https://grapesjs.com/de...
Issue #6087
BUG: Undo doesn't work after a Component's innerHTML is changed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Latest Reproducible demo link https://jsfi...
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.