# On selection END event

**URL:** <https://community.penpot.app/t/on-selection-end-event/7305>\
**Category:** Plugins\
**Created:** [December 11, 2024, 12:13pm UTC](https://community.penpot.app/t/on-selection-end-event/7305 "2024-12-11T12:13:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![daledesilva](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/daledesilva/32/6493_2.png) [@daledesilva](https://community.penpot.app/u/daledesilva)\
**Post date:** [December 11, 2024, 12:13pm UTC](https://community.penpot.app/t/on-selection-end-event/7305/1 "2024-12-11T12:13:38Z")

</div>

At the moment there’s an **onselectionchange** event.

```ts
penpot.on('selectionchange', (newSelectionIds) => {
}

```

However, this fires repeatedly while the user is dragging a selection marquee. This makes it particularly difficult to work with as there’s no sure fire way to filter out all the times you don’t want it to fire.

Is there a way to achieve an **onselectionend** event for when the user releases their mouse and solidifies their selection?

I see that there’s a **finish** event, but I couldn’t figure out when this fires (And it doesn’t seem related)

Thanks!  
Dale.

---

<div class="post-metadata">

**Author:** ![tank666](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/tank666/32/132_2.png) [@tank666](https://community.penpot.app/u/tank666)\
**Post date:** [December 11, 2024, 5:35pm UTC](https://community.penpot.app/t/on-selection-end-event/7305/2 "2024-12-11T17:35:51Z")

</div>

Currently I handle it like this:

```javascript
let selectionIds = penpot.selection.map(node => node.id);

penpot.on('selectionchange', eventIds => {
  if (selectionIds.toString() !== eventIds.toString()) {
    selectionIds = [...eventIds];
    console.log('selectionchange', selectionIds)
  }
})

```

Thus, the array of IDs is output to the console only after the values of one of the arrays do not match the other.

---

<div class="post-metadata">

**Author:** ![daledesilva](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/daledesilva/32/6493_2.png) [@daledesilva](https://community.penpot.app/u/daledesilva)\
**Post date:** [December 11, 2024, 7:50pm UTC](https://community.penpot.app/t/on-selection-end-event/7305/3 "2024-12-11T19:50:25Z")

</div>

Thank you!  
That’s actually very similar to how I’m handling it (though I debounce the function as well).

Unfortunately, yours will still fire multiple times while dragging a selection over a series of shapes (after each one selects or deselects), and it will slow the performance the larger the selection.

Und mine has the issue of having a delay before being able to take action.