Can't select the model using editor.select()
@artf , @pouyamiralayi :I need this condition inside the 'canvas:drop' event editor.on('canvas:drop', ()=>{ ... ... // My code to select the first component is here //... ... })
Read full answer below ↓Question
I am trying to select the first component in the editor by using editor.select(editor.DomComponents.getComponents().models[0]). It is not working.
Answers (3)
@artf , @pouyamiralayi :I need this condition inside the 'canvas:drop' event editor.on('canvas:drop', ()=>{ ... ... // My code to select the first component is here //... ... })
@naveen-15697 you can achieve this with:
editor.on('block:drag:stop', (m) => {
if(m){
editor.select(editor.getComponents().models[0])
}
})
cheers!
@pouyamiralayi Thanks! It's working now.
@artf , But, Why it is not working in 'canvas:drop' event?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2549
[QUESTION] Update component view on property change
Hi everyone, I'm trying to create a component that will update it's view based on a property value My approach is bassed on #1227 and on th...
Issue #3014
BUG: Move component from Child
Hi, i'm trying to make custom components composed with other components. No problem to do that. I'm facing an issue when i want to move the...
Issue #1998
Extending Link component not working properly.
hello @hello @artf I am trying to extend the link component and add new traits like href and target the code is given below. `function load...
Issue #1091
How to select the first Component
I want to launch the editor with the style manager visible and populated. Meaning that a component is selected by default and the style man...
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
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
GrapesJS vs Webflow vs Tilda (2026): Honest Comparison, Pricing & Which to Pick
GrapesJS vs Webflow vs Tilda compared head-to-head: real 2026 pricing, SEO features, code export, and which one actually fits your project
Tutorial
Integrating GrapesJS into a Vue 3 App — Complete Guide for 2026
Build a Vue 3 landing page builder with GrapesJS and Vite. Custom blocks, composables, remote storage, TypeScript & production tips. Updated for 2026.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.