Button content blocks ability to click the button

I am building a react app using Button from material-ui. I want to be able to drag and drop a component containing a button. For the drag and drop ability I am using react-sortable-hoc. The button works correctly when there is no content in the button, but when the button contains anything, such as an icon in the code below, a is rendered over the button which does not allow you to click the button. However, it is possible to click the button above or below the edge of the and the button registers that it has been clicked. I cannot determine why the Icon is preventing the button from registering the fact that it is being clicked.

Here is the code for the button which is in ComponentContainingButton.

<FormControl>
  <Button onClick={e => handleButtonClick(e, currentIndex)}>
    <DeleteIcon />
  </Button>
</FormControl>

And here is the code that is rendering ComponentContainingButton.

const SortableItem = SortableElement((props) => {
  const {
    handleButtonClick
    currentIndex,
  } = props;

  return (
    <div className="box">
      <TravelSingleLeg
        handleButtonClick={handleButtonClick}
        currentIndex={currentIndex}
      />
    </div>
  );
});

const SortableList = SortableContainer((props) => {
  const {
    items,
    handleButtonClick
  } = props;

  return (
    <div>
      {items.map((value, index) => {
        const identifier = `item-${index}`;

        return (
          <div>
            <SortableItem
              key={identifier}
              index={index}
              currentIndex={index}
              handleButtonClick={handleButtonClick}
            />
          </div>
        );
      })}
    </div>
  );
});

Any help you can give me would be greatly appreciated.

Solution

This is old question, but some people, like me, who still see this issue, might want to read this: https://github.com/clauderic/react-sortable-hoc/issues/111#issuecomment-272746004

Issue is that sortable-hoc swallows onClick events. But we can have workarounds by setting pressDelay or distance.

For me the best option was to set minimum distance for sortable list and it worked nicely

You can also use the distance prop to set a minimum distance to be dragged before sorting is triggered (for instance, you could set a distance of 1px like so: distance={1})

So in your case, we can fix this by using

      ...
      <div>
        <SortableItem
          key={identifier}
          index={index}
          currentIndex={index}
          handleButtonClick={handleButtonClick}
          distance={1}
        />
      </div>
      ...