Popover

Hi,

I've a small question on Popover.

If we click outside of the component the Popover is getting hidden which is a normal behavior but when we click on the Popover header or body also it's getting hidden, instead can we close the Popover on click of any action buttons (close icon on the header part / cancel button on the body part) inside of the Popover...?

Resources (screenshots, code snippets etc.)

<MDBPopover component="button" tag="div" placement="top" popoverBody="Filters" className="btn btn-dark btn-sm float-right">
    <MDBPopoverHeader className="elegant-color white-text font-weight-bold">
        <span>Filters</span>
        <button type="button" className="close float-right" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </MDBPopoverHeader>
    <MDBPopoverBody className="elegant-color white-text" tag="div">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
        <span>Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
        <MDBInput className="p-2" onChange={() => this.inputChange()} />
        <MDBBtn type="button" color="primary" className="">Ok</MDBBtn>
    </MDBPopoverBody>
</MDBPopover>

Let's I've a code like this and when I click on the Ok or x buttons on the Popover then only the it should disappear/close

Thanks :)