Topic: How to prevent popover to close when we click on its content and only close when we click outside it

anilwhiz premium asked 1 month ago


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>

Arkadiusz Idzikowski staff commented 1 month ago

Could you please edit your post and provide an example code on which we will be able to reproduce this problem?


anilwhiz premium answered 1 month ago


Hello Arkadiusz,

Did you check this issue? I have updated my comment with the Sample code



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: laptop
  • Browser: All browsers
  • OS: Windows
  • Provided sample code: No
  • Provided link: No