Clicking only works on the center of Drag handlers

[YahngSungho]

As shown in the attached GIF, clicks only work on the center of the elements. I want clicks to also work on the edges of drag handlers...

In this case, what keywords should I search for to solve the problem?

My code is as follows (simplified)

    <div {...dragableHandleProps}>
        <button />
    </div>

And here is the real code

    <div {...dragableHandleProps}>
        <Button icon={'drag-handle-vertical'} minimal className={'visibleIfHover3 grabCursor'} />
      </div>

The Button component is from https://blueprintjs.com/docs/#core/components/button But anyway, the click event is captured by the div tag

[yobananaboy15]

I have a similar issue. Not sure what is causing it.

[YahngSungho]

Does anyone have any clues? Please...

[yobananaboy15]

I managed to solve it by removing the button component and simply wrapping the icon in a div. Try that.

[YahngSungho]

@yobananaboy15 Do you mean that you replaced the button with the icon??

[yobananaboy15]

Exactly. Try removing the button and replace it with the icon you want to use.

[YahngSungho]

@yobananaboy15 Thanks. But I want to use the buttons...