Expected behavior

I am adding a small form of two fields inside the popover, and I want that popover to only close when we click outside the popover, but it should not close when we click on the form (popover content) that we have added in that popover.

Actual behavior

Right now, the popover closes as soon as we click on the popover content but we want to close it whenever the user clicks outside that popover form. Below is the sample code, let me know if you need anything else.

Resources (screenshots, code snippets etc.)

  <h3 class="m-widget1__title">Monthly Budget 
    <a class="btn btn-sm m-btn--sm m-btn header_btn"
    tabindex="0" id="Budget_Popover"
    [mdbPopover]="popover_template"
    role="button"
    mdbPopoverTitle="Set Budget">
        <i class="fa fa-pencil-alt"></i>
    </a>
</h3>

<ng-template #popover_template>
    <div id="seller_config_div">
        <div class="form-group m-form__group row">
            <label class="col-5 col-form-label">Monthly Budget</label>
            <div class="col-7">
                <div class="m-input-icon m-input-icon--left">
                    <input type="number" class="form-control m-input m-input--pill" title="Monthly Budget" placeholder="Monthly Budget"  name="custom_monthly_budget">
                    <span class="m-input-icon__icon m-input-icon__icon--left">
                        <span class="field-icon">
                            <i class="fa fa-dollar-sign"></i>
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="m-form__actions">
            <button type="button" class="btn popoverbtn m-btn m-btn--pill btn-green-active save_seller_config"><i class="fa fa-save"></i> Save</button>
        </div>
    </div>
</ng-template>