Topic: Popover not closing when click outside
Expected behavior Close popover when click outside of the trigger element.
Actual behavior It doesn't close if the element clicked is another popover element.
Resources (screenshots, code snippets etc.)
html
<ul>
<li *ngFor="let i of [1, 2, 3, 4, 5]" (click)="selectedElement = i"
[mdbPopover]="popTemplate" triggers="focus" [outsideClick]="true"
class="p-2">
Element {{i}}
</li>
</ul>
<ng-template #popTemplate>
Clicked on element {{selectedElement}}
</ng-template>
TS
selectedElement: number = 0
In this example, if you click an item, the popover shows properly. If you click outside the list, then it also hides correctly. The problem comes when you click on one item and then you click another. The variable "selectedElement" updates accordingly, but the previous popover doesn't hide, which causes results a user may not understand.
Is there any solution to this situation?
Thanks
Grzegorz Bujański staff answered 4 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Computer
- Browser: Any
- OS: Windows
- Provided sample code: No
- Provided link: No