[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:

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)
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;
}
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>';
},
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.
Issue #1514
How to add video block on blockManager
Hello All. i want to add a video block on blockmanager same as mentioned on below snapshot i am using following code for adding video block...
Issue #899
[QUESTION]: add button to selected element panel
How to add custom button to that panel:
Issue #417
Add Setting button to custom component.
Hello, How can I create a setting or you can say edit button for my custom component? LIke 4th option on this image:
Issue #1695
Adding new trait to Video component
I want to add a new trait for existing VIDEO '' component. I follow the docs and I didn't find what I want. Now I got the new trait added t...
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.