BUG: Custom trait input not working
Question
Hi @artf !
Version: 0.17.3
Are you able to reproduce the bug from the demo?
- Yes
- No
What is the expected behavior?
The input is created correctly
Describe the bug detailed
I am trying to create a custom input (checkbox) and it doesn't work.
What is the current behavior?
See attach.
Are you able to attach screenshots, screencasts or a live demo?
- Yes (attach)
- No
Code:

Result:

The area that should be some kind of "input" is not clickable.
If I am doing something wrong, let me know :)
Answers (3)
@RaresVlaiduc mmm I'd expect it to work also with an HTML string... I have to check it
Then, in createInput() you should return an Element.
So instead of returning a simple string, do this:
const el = document.createElement('div');
el.innerHTML = `<input type='checkbox'/>`
return el;
If you want to have a simple checkbox with label, no need to create custom trait, you can just use directly:
editor.DomComponents.addType('text', {
model: {
defaults: {
traits: [
{type: 'checkbox', label: 'Fix position when scrolling', name: 'position-sticky'}
]
}
},
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3622
BUG: I18n functionality
Version: latest Are you able to reproduce the bug from the demo?[] Yes[ ] No What is the expected behavior? to editor.I18n.setLocale("es")...
Issue #3681
BUG: Textable not working with extended text component
Version: 0.17.22 Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? Should be able to drop a text...
Issue #3475
BUG: Toolbar/actionbar buttons do not work when there are multiple instances present (Even in your demo)
Version: 0.16.44 You can get the version by typing grapesjs.version into the console Are you able to reproduce the bug from the demo?[x] Ye...
Issue #3402
BUG: Unable to get blocks to show in right hand sidebar
Version: 0.14.62 Are you able to reproduce the bug from the demo?[ ] Yes[x] No Doesn't support Vue.js or NPM What is the expected behavior?...
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.