MDBTooltip is overriding MDBBtn click event


Topic: MDBTooltip is overriding MDBBtn click event

chrismiddle10 pro asked 5 years ago

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 ) );
    } )

Aliaksandr Andrasiuk staff answered 5 years ago

Hi,

So many thanks for your response. Will fix this bug in the near future.

Best regards.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.17.0
  • Device: n/a
  • Browser: n/a
  • OS: n/a
  • Provided sample code: No
  • Provided link: No