[Bug]: custom style property is not working when toRequire attribute is set
Question
- Are you using the latest release (older versions are NOT supported)? Yes
- What is the expected behavior? Custom style property applying to component
- What happens instead? Custom style property is not working
- Steps to reproduce
- select Box component
- try to change Box Width style property (under Custom tab)

When I add custom style property(flex) with toRequire: 1 parameter then custom style is not working. When I mark toRequire as 0 then style property work as expected.
JSFiddle with toRequire: 1 - https://jsfiddle.net/rjw7Lq93/1/
JSFiddle with toRequire: 0 - https://jsfiddle.net/rjw7Lq93/2/
Answers (3)
I managed to hotfix it by extending `isTargetStylable` method inside PropertyView.js - https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/style_manager/view/PropertyView.js#L504-510
I replaced this
> if (toRequire) {
stylable =
!target ||
(stylableReq &&
(stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
}
with this
> if (toRequire) {
stylable =
!target ||
trg.cid === this.getTarget().cid ||
(stylableReq &&
(stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
}
It seems that the wrong `target` parameter comes inside the method on component style change
JSFiddle with extended PropertyView - https://jsfiddle.net/6zf03t9w/Offtop
I don't want to create another topic, just want to say that in the same method(isTargetStylable) that would be better to replace searching for property with id(as I understand for the built-in styles, it is the same as the property) inside unstylable(as well as stylable) check
> if (_.isArray(unstylable)) {
stylable = unstylable.indexOf(property) < 0;
}
->
> if (_.isArray(unstylable)) {
stylable = unstylable.indexOf(id) < 0;
}
Since I had a problem with displaying a custom style for a component of the same property as the built-in one. (in my application, the built-in style should be displayed for some components, and custom for others)would be better to replace searching for property with id(as I understand for the built-in styles, it is the same as the property) inside unstylable(as well as stylable) check
Yeah, totally correct!
Honestly, I use toRequire option and never seen this kind of issue so I'm not sure why this happening. Would you mind to create a PR with your fixes (maybe I'll try to investigate better)?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2276
[BUG] `change:style` listener is not triggered
Are you using the latest release (older versions are NOT supported)? version 0.15.8What is the expected behavior? change:style listener sho...
Issue #2683
[BUG] When cancel Colorpicker, it set wrong value for component
Are you using the latest release (older versions are NOT supported)? Yes.Are you facing the bug with your local copy of GrapesJS or with th...
Issue #3295
BUG (v0.16.41): Button component with draggable property is not working properly
Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? When we have a button with...
Issue #2469
[BUG] Adding buttons to RTE toolbar in React App causes buttons to be duplicated.
Are you using the latest release (older versions are NOT supported)? YES, 0.15.9Are you facing the bug with your local copy of GrapesJS or...
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.