onClick not working

[psm-solution-group]

Hello,

if I click on my Icon at sortableItem Component then nothings triggers. if I add the same comonent to sortableList it works. Why can I not onClick on sortableItem ? It is the item "IosCloseCircle".

const SortableItem = SortableElement<SortableElementProps & TDragAndDropSortableItem>(({ value, onDelete }: TDragAndDropSortableItem) => (
  <div>
    <div className="relative drag-item">
       /// HERE NOT WORKING NO TRIGGER/no console log
      <IoCloseCircle onClick={() => console.log('saas')} size={24} className="delete-button-dad" />
      <img src={value} className="dad-img" />
    </div>
  </div>
));

const SortableList = SortableContainer<SortableContainerProps & TDragAndDropSortableList<string>>(({ items, onDelete }: TDragAndDropSortableList<string>) => {
  return (
    <div className="relative" style={{ display: "flex", flexWrap: "wrap" }}>
      {items.map((value: any, index: number) => (
        <div className="relative">
          <SortableItem key={`item-${value}`} index={index} value={value} onDelete={(e) => console.log(e)} />
        </div>
      ))}
    </div>
  );
});

[ailunc]

Hi @psm-solution-group !
You can try prevent drag interactions on the clickable child element (IoCloseCircle) by:
Adding e.stopPropagation() and e.preventDefault() in the onClick:

<IoCloseCircle
  onClick={(e) => {
    e.stopPropagation(); // stop the drag
    e.preventDefault();  // prevent any default behavior
    console.log('saas');
  }}
  size={24}
  className="delete-button-dad"
/>