How to add option element in select field.

[simplecommerce]

Hi Miguel,

Stupid question, how do you add option elements in the select field of the forms?

I looked and I noticed that it seems to use the same traits as the forms package from grapesjs plugin, but I still don't get it.

I noticed that when dropping the select element it adds a default option.

<select class="form-control" id="i54ef"><option value="">- Select option -</option><option value="1">Option 1</option></select>

Like this, but when I click on the select element in the canvas, I don't see the options appear in the options trait.

Thanks!

[kaoz70]

That's weird, I have this set in the component settings:

What version of GrapesJs are you using? Mine is 0.14.52

EDIT: I just realized that enabling the gjs-preset-webpage plugin makes the select box work correctly.

[simplecommerce]

I tried installing the forms plugin standalone in hopes to make it work, as the code required for the traits is in that package, but it didn't work no matter how I tested it.

I had to copy this code

    const trm = editor.TraitManager;
    trm.addType('select-options', {
      events:{
        'keyup': 'onChange',
      },

      onValueChange: function () {
        var optionsStr = this.model.get('value').trim();
        var options = optionsStr.split('\n');
        var optComps = [];

        for (var i = 0; i < options.length; i++) {
          var optionStr = options[i];
          var option = optionStr.split('::');
          var opt = {
            tagName: 'option',
            attributes: {}
          };
          if(option[1]) {
            opt.content = option[1];
            opt.attributes.value = option[0];
          } else {
            opt.content = option[0];
            opt.attributes.value = option[0];
          }
          optComps.push(opt);
        }

        var comps = this.target.get('components');
        comps.reset(optComps);
        this.target.view.render();
      },

      getInputEl: function() {
        if (!this.$input) {
          var md = this.model;
          var trg = this.target;
          var name = md.get('name');
          var optionsStr = '';
          var opts = {placeholder: ''};
          var options = trg.get('components');

          for (var i = 0; i < options.length; i++) {
            var option = options.models[i];
            var optAttr = option.get('attributes');
            var optValue = optAttr.value || '';
            optionsStr += `${optValue}::${option.get('content')}\n`;
          }

          this.$input = document.createElement('textarea');
          this.$input.value = optionsStr;
        }
        return this.$input;
      },
    });    

And put it after my editor instance in order for the options to appear now and to be able to change them.

Before doing this, when changing it, it had a weird effect, it put a ""="" attribute or something similar in the select tag.

No idea why in the preset plugin it would work when you install it, maybe because of the way it loads things?

I didn't want to install it because I am trying to only install the packages I use.

A quick note, are you able to click on the select to see the dropdown options in preview mode?

I am not able to see them at all except of I look at the code.

Thanks for your help!

[kaoz70]

Let me look into this code, I will try to integrate it so that this package doesn't have to rely on the gjs-preset-webpage plugin.

Regarding the click event in the select, this is not working, I did notice this before but didn't look into it because the main GrapesJS demo doesn't do this either. Maybe I can get this to work somehow.

[kaoz70]

Alright, so I integrated the code into the plugin, additionally you can pass the optionsStringSeparator in the config if you want to use another separator instead of the '::'

Default separator:

::- Select option -
1::Option 1

Custom separator:

|- Select option -
1|Option 1

[simplecommerce]

Awesome, thanks a bunch, I will test it out. I also found it not intuitive on how to add the options, I would've thought they would think to add a + button to add an option with the name and value fields, instead of it being a textarea like that.

But it works for now which is great!

[kaoz70]

Yeah, I also thought that, maybe I can try to do something about the select's options in the traits.