Custom trait input not working
@RaresVlaiduc mmm I'd expect it to work also with an HTML string... I have to check it
Read full answer below ↓Question
Hi @artf ! Version: 0.17.3 Are you able to reproduce the bug from the demo?[ ] Yes[x] 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?[x] 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 (4)
@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:
Thanks for reporting this, @RaresVlaiduc. The issue with Custom trait input not working appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state. What to try: Add a setTime...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3622
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
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
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 #3295
BUG (v0.16.41): Button component with draggable property is not working properly
Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? When we have a button with...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Tutorial
Messaging on gjs.market: talk to a studio before you buy, not after
We've launched private messaging between buyers and studios. One thread per buyer–studio pair, the whole history in one place.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.