BUG: selection box not clickable in editor

[confettidc]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 94.0.1

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Try drag a selection box into form in above demo site can reproduce the issue
2. ...

What is the expected behavior? Selection box should be able to display options when added

What is the current behavior? Selection box now only can highlight, but can't display options inside

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// your code here

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

If you're talking about the Select component from the form plugin, in that case, options are displayed as traits.

[confettidc]

Yes, but selection box still not clickable even in preview? Thanks.

[thewrath]

Hello, This problem is due to this line (https://github.com/artf/grapesjs-plugin-forms/blob/master/src/components.js#L186). It could be interesting to enable the event only in case the editor is in preview mode? Then is it really useful to have the event in preview mode?

I don't know how the preview system works but I can look at it to propose a PR ?

[thewrath]

@confettidc If you want to patch this quickly, you can define a small plugin as follows:

const selectEventInPreview = (editor) => {

        editor.on('load', () => {
          // This overload the select type
          editor.DomComponents.addType('select', {
            model: {
              defaults: {
                enableEvents: false
              },

              init() {
                // Maybe better to use (this.listenTo)
                editor.on('run:preview', () => this.set('enableEvents', true));
                editor.on('stop:preview', () => this.set('enableEvents', false));
              },
            },
            view: {
              events: {
                mousedown: function(e) {
                  if (!this.model.get('enableEvents')) {
                      e.preventDefault();
                  }
                }
              }
            }
          });
        });
      };

      const editor = grapesjs.init({
        height: '100%',
        noticeOnUnload: 0,
        storageManager:{autoload: 0},
        container : '#gjs',
        fromElement: true,

        plugins: ['grapesjs-plugin-forms', selectEventInPreview],
        pluginsOpts: {
          'grapesjs-plugin-forms': {}
        }
      });

The idea is to set the 'select' type to listen to 'mousedown' only when the editor is in preview mode (you know this by looking at the command events).

You can also simply leave the event active, but this is not very ergonomic :

view: {
  events: {
    mousedown: function(e) {
    }
  }
}

[confettidc]

Hi,

Above works, thanks.