Topic: How to prevent popover to close when clicking on its content
anilwhiz premium asked 3 weeks ago
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.
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>
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.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- 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