Issue #987Opened March 29, 2018by baxxos0 reactions

[BUG/Question] Dropdown indicator not displayed for a custom trait

Question

Hello,

the dropdown (select) element arrow indicator icon is not rendered when adding a custom trait to a component:

image

I'm using following code to add the custom trait to the link component:

editor.TraitManager.addType('internal-link', {
    // A custom option-loading function
    loadOptions: function (inputEl) {
        foo();
    },
    getInputEl: function () {
        if (!this.inputEl) {
            var input = document.createElement('select');
            this.loadOptions(input);

            this.inputEl = input;
        }
        return this.inputEl;
    },
    onValueChange: function () {
        bar();
    }
});

linkModel.prototype.defaults.traits.push({
    type: 'internal-link',
    label: 'Internal link',
    name: 'internal-link'
})

Is there anything I'm missing? An extra attribute perhaps? Everything else works fine, except for this detail (which is apparently very important to my customer).

I am currently on release 14.6 and I can't find a way how to force GrapesJS to render the dropdown indicator like it does for all default component traits (e. g. link target).

Answers (3)

nojackoMarch 29, 20180 reactions

I think you have to override the CSS.

.gjs-trt-trait .gjs-field .gjs-input-holder select {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}
baxxosMarch 29, 20180 reactions

Successfully resolved via a "dirty hack" (overloading the initialize method) referenced here: #972

initialize: function () {
    editor.TraitManager.getTraitsViewer().itemView.prototype.initialize.apply(this, arguments);
    this.tmpl = '<div class="' + this.fieldClass + '"><div class="' + this.inputhClass + '"></div>' + '<div class="' + this.ppfx + 'sel-arrow"><div class="' + this.ppfx + 'd-s-arrow"></div></div> </div>';
},
lock[bot]September 17, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.