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 or that form we have added in that popover.

Actual behavior

Right now, the popover closes as soon as we click on it or select any field inside it, 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.

    <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>