Sortable - onClick event fired when moving a SortableItem to a lower index

Hi !

I’m facing an issue using sortable: when I’m moving a SortableItem from right to left, the onClick event is fired along the onDragEnd event. This isn’t happing if I’m moving my item to the right.

Here is the simple sample of code I’m using:

              <DndContext
                    sensors={sensors}
                    collisionDetection={closestCenter}
                    onDragEnd={handleDragEnd}
                    modifiers={[restrictToParentElement]}
                >
                    <SortableContext
                        items={displayedArticles.map(article => article.id)}
                        strategy={rectSortingStrategy}
                    >
                        {displayedArticles.map(article => (
                            <Article
                                key={article.id}
                                name={article.name}
                                id={article.id}
                                onDeleteClick={() => {
                                    setArticleToDelete(article.id);
                                }}
                                onClick={() => console.log('onClick fired')}
                            />
                        ))}
                        <Add onClick={onOpen} />
                    </SortableContext>
                </DndContext>

And here is a video of what’s happening:

Is this an expected behavior ? Do I miss something ? Is there a way to completely silent onClick when the Item has been dragged ?

Thank you !

[lonk]

Hi @clauderic !

Thank you for your quick reply.

Your workaround doesn’t work in my case because onDragEnd is fired before onClick so I think I’ll go with the DragOverlay workaround 😃

Have a nice day !

[ShakurOo]

Same problem. The onClick event attached to the button inside my draggable element doesn’t trigger anything 😕