Topic: How to prevent popover to close when clicking on its content

anilwhiz premium asked 3 weeks 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, 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>

Lumpenstein free commented 3 weeks ago

Small world, was about to ask the same question today :)


Grzegorz Bujański staff answered 3 weeks ago


Popover doesn't have that option. Note that the trigger option applies to the toggle element. So if you set the trigger to focus and the toggle button loses focus, the popover will close.

You can set a trigger on the click, track the click outside of the popover, and use the close method to close the popover.

You can also use popconfirm instead of the popover which by default works so that clicking on popconfirm doesn't close the component, and click outside popconfirm will close it.



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