MDBPopover does not work with MDBIcon as first child component

[tsjohns9]

I am using the MDBPopover component and I want to be able to use the MDBIcon component as the clickable component to trigger the popover. Unfortunately using MDBIcon does not work with MDBPopover.

When I use this component without the domElement prop clicking the icon will do nothing

<MDBPopover popover clickable placement="left">
  <MDBIcon far icon="trash-alt" className="text-danger pointer" />
  <div>
    <MDBPopoverHeader className="text-center text-primary">Are You Sure?</MDBPopoverHeader>
    <MDBPopoverBody className="text-center">
      <span
        name={product.name}
        className="text-danger text-center pointer"
        onClick={deleteProduct}
        data-cartproductid={product.CartProductId}
        data-index={i}
      >
        Yes
      </span>
    </MDBPopoverBody>
  </div>
</MDBPopover>

And I am given this error:

Warning: React does not recognize the `innerRef` prop on a DOM element.

When I add the domElement prop I receive this error, and my popover is placed in the top left of the nearest absolute ancestor:

index.js:1437 Warning: `NaN` is an invalid value for the `top` css style property.
    in span (created by InnerPopper)
    in div (created by InnerPopper)
    in InnerPopper (created by Context.Consumer)
    in Popper (created by Popper$$1)
    in div (created by Popper$$1)
    in Manager (created by Popper$$1)
    in Popper$$1 (at tableData.js:27)

When I switch the MDBIcon component to a simple div with the domElement prop it works as expected. When I switch to MDBBtn without the domElement prop it works as expected.

EDIT: This is also impacting the MDBDropdownItem component as well and the same issue happens when MDBTooltip is used instead of MDBPopover.

[Rotarepmi]

MDBIcon doesn't have prop innerRef. You have to wrap it in the f.e. span and use domElement like this:

<MDBPopover popover clickable placement="left" domElement>
  <span><MDBIcon far icon="trash-alt" className="text-danger pointer" /></span>
    <div>
      <MDBPopoverHeader className="text-center text-primary">Are You Sure?</MDBPopoverHeader>
      <MDBPopoverBody className="text-center">
        <span
          name={product.name}
          className="text-danger text-center pointer"
          onClick={deleteProduct}
          data-cartproductid={product.CartProductId}
          data-index={i}
        >
          Yes
        </span>
      </MDBPopoverBody>
    </div>
</MDBPopover>

Best, Jakub