Flex Property not working in style manager

I diagnosed the issue after finding the same problem independently.

Looking at StyleManager.select()

https://github.com/artf/grapesjs/blob/75cd582a8d1a91096276bc4dccc7475a269ad45c/src/style_manager/index.js#L339-L395

On line 369, every property is looped through to check its visibility for the new target.

However the __checkVisibility function does not access the current value by looking at the target's styles. Instead it looks for the current value stored in the property model. (source)

The problem is that __checkVisibility is being called before the property model hasn't been told a new target has been selected, as that does not happen until line 392. So the value being checked is not from the target we just selected.

@Vac1911 @artf I got it, but what's the solution, how can I fix this problem? is this grapejs issue or mine?

@saudAtIrisdame It seems to be a grapejs issue. I fixed it for myself changing the source code, reordering the select method to check visibility last.

Here is the dist file after running build:js https://gist.github.com/Vac1911/4c89f2a48809bee5fefd2d21525d37ad

   select(target, opts = {}) {
      const { em } = this;
      const trgs = isArray(target) ? target : [target];
      const { stylable } = opts;
      const cssc = em.get("CssComposer");
      let targets = [];

      trgs.filter(Boolean).forEach((target) => {
        let model = target;

        if (isString(target)) {
          const rule = cssc.getRule(target) || cssc.setRule(target);
          !isUndefined(stylable) && rule.set({ stylable });
          model = rule;
        }

        targets.push(model);
      });

      const component =
        opts.component || targets.filter((t) => isComponent(t)).reverse()[0];
      targets = targets.map((t) => this.getModelToStyle(t));
      const state = em.getState();
      const lastTarget = targets.slice().reverse()[0];
      const lastTargetParents = this.getParentRules(lastTarget, {
        state,
        component,
      });
      let stateTarget = this.__getStateTarget();

      // Handle the creation and update of the state rule, if enabled.
      em.skip(() => {
        if (state && lastTarget?.getState?.()) {
          const style = lastTarget.getStyle();
          if (!stateTarget) {
            stateTarget = cssc
              .getAll()
              .add({ selectors: "gjs-selected", style, important: true });
          } else {
            stateTarget.setStyle(style);
          }
        } else if (stateTarget) {
          cssc.remove(stateTarget);
          stateTarget = null;
        }
      });

      this.model.set({ targets, lastTarget, lastTargetParents, stateTarget });
      this.__upProps(opts);

      // Update sectors/properties visibility
      sectors.forEach((sector) => {
        const props = sector.getProperties();
        props.forEach((prop) => {
          const isVisible = prop.__checkVisibility({
            target: lastTarget,
            component,
            sectors,
          });
          prop.set("visible", isVisible);
        });
        const sectorVisible = props.some((p) => p.isVisible());
        sector.set("visible", sectorVisible);
      });

      return targets;
    },

Thanks for reporting this, @saudAtIrisdame.

Great question about Flex Property not working in style manager. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!