Summary

In a very basic button / tooltip configuration, I can not get the specified click event to fire. It is overridden by the tooltip component. My tooltip triggers on "hover" not "click".

Upon looking at the source, I do not think that all event handlers should be attached regardless of trigger. In other words, a "hover" trigger tooltip should not interfere with any click events, and a "click" trigger tooltip should not interfere with any mouse enter/leave or touch start/end events. But then again, I do not know if conditionally setting this handlers will have side-effects.

Expected behavior

Configured "MDBBtn#onClick" prop should fire without interference from its wrapping "MDBTooltip" component.

Actual behavior

Configured "MDBBtn#onClick" function does not fire. Instead, "MDBTooltip" overrides the event with its own "onClick" prop.

Resources (screenshots, code snippets etc.)

This is the basic setup I have:

<MDBTooltip placement="top">
    <MDBBtn onClick={()=>{alert( '!' )}}>
        Click me!
    </MDBBtn>
    <div>
        Testing click event
    </div>
</MDBTooltip> 

I think the bug is in Popper.js in the snippet of code below in its attaching all events regardless of the "clickable" prop.

<Reference>
        {
          ({ ref }) => (
            !domElement
              ? <Wrapper.type
                {...Wrapper.props}
                onMouseEnter={() => !clickable && setVisible(true)}
                onMouseLeave={() => !clickable && setVisible(false)}
                onTouchStart={() => !clickable && setVisible(true)}
                onTouchEnd={() => !clickable && setVisible(false)}
                onClick={() => clickable && setVisible(!visible)}
                innerRef={ref}
                data-popper={id}
              />
              : <Wrapper.type
                {...Wrapper.props}
                onMouseEnter={() => !clickable && setVisible(true)}
                onMouseLeave={() => !clickable && setVisible(false)}
                onTouchStart={() => !clickable && setVisible(true)}
                onTouchEnd={() => !clickable && setVisible(false)}
                onClick={() => clickable && setVisible(!visible)}
                ref={ref}
                data-popper={id}
              />
          )
        }
</Reference>

The following is the current (very hacky) override I am using in "mdbreact.esm.js". It is not heavily tested yet, but I think it shows the basics of what needs to happen to fix this problem.

return React.createElement( Manager, null, React.createElement( Reference, null, function ( _ref2 ) {
        var ref = _ref2.ref,
            config = { 'data-popper': id };

        if( clickable ) {
            config.onClick = function() { setVisible( !visible ) };
        } else {
            config.onMouseEnter = config.onTouchStart = function() { setVisible( true ) };
            config.onMouseLeave = config.onTouchEnd = function() { setVisible( false ) };
        }

        if( domElement ) {
            config.ref = ref;
        } else {
            config.innerRef = ref;
        }

        return React.createElement( Wrapper.type, _extends( {}, Wrapper.props, config ) );
    } )