How to get both click and drag on the same component and distinguish the 2

[greggman]

This is about having a component that calls addTabWithDragAndDrop.

Here's the code from the demo

    onAddDragMouseDown = (event: React.MouseEvent | React.TouchEvent<HTMLButtonElement>) => {
        event.stopPropagation();
        event.preventDefault();
        (this.layoutRef!.current!).addTabWithDragAndDrop(undefined, {
            component: "grid",
            icon: "images/article.svg",
            name: "Grid " + this.nextGridIndex++
        }, this.onAdded);
        // this.setState({ adding: true });
    }

    ...

    <button ...
        onMouseDown={this.onAddDragMouseDown}
        onTouchStart={this.onAddDragMouseDown}>Add Drag</button>

Now I want to add that if the user clicks the button vs dragging it, something different happens

    <button ...
        onMouseDown={this.onAddDragMouseDown}
        onTouchStart={this.onAddDragMouseDown}
        onClick={() => console.log('click')}>Add Drag</button>

As it is, I never get the click event. Even if I remove the event.stopPropagation and event.preventDefault from onAddDragMouseDown

To see an example of what I'm trying to, in VSCode, the File Explorer, each of the filenames can both be clicked OR dragged and dropped.

Screen.Recording.2022-10-31.at.1.03.53.AM.mp4

How would I do the same type of thing in FlexLayout?