onClick does not work on renderItem elements

[danvln]

Hello,

I have tried to add onClick on renderItem, and it does not work.

Here you can see the code.

        ` renderItem={({
            index,
            value,
            props,
            isDragged,
            isSelected,
            isOutOfBounds,

        }) => {
            return (
                <div onClick={(event) => handleSelect(index)} {...props} className={clsx(
                    "fast-draggable-list-item",
                    selectedIndex === index ? "fast-draggable-list-item-selected" : ""
                )}
                    key={index}
                >`

The interesting part is if I add a button, onClick works.

Any idea, is this a bug or am I missing something?

[tajo]

I think it's just blocked to not collide with the main functionality (drag and drop). Interactive elements like buttons have an exception and take the priority.

[danvln]

Thanks for the answer. I mitigated this by using onMouseDown, in case anyone else hits it.

[igorokb]

It is a shame the issue didn't get attention :(. It is quite frequent use case when you have to sort something which also has onClick, onMouseUp event handlers. For example, some tabs, which have to be draggable in order to change the order, meanwhile clicking on each opens corresponding page, like the browser tabs. @danvln's workaround partially resolves the problem, but using of onMouseDown means, that the dragged element gets "clicked" state.

[tajo]

As long as your clickable elements are buttons or have a correct role (as they should to be a11y friendly), this should not be a problem. If it is, it might be a bug.