On click of Mat menu radio button which is inside bootstrap popover it closes the popover

David Rudd 0
Viewed 24

I have a bootstrap popover in which I'm using autoclose="outside" to close the popover on click of outside. But inside popover I have a mat menu which gets opened outside the popover. Problem here is if I select any radio button inside mat menu as it is outside the popover it closes the popover. I still want to retain the popover on click of anything from mat menu as it is still part of popover. On click of outside apart from mat menu then pop over should close.

code

<div #popOver="ngbPopover" placement="bottom" autoClose="outside"
        [ngbPopover]="PopContent">
<ng-template #PopContent>
    <button [matMenuTriggerFor]="menu1">
       popover
    </button>   
    <mat-menu #menu1="matMenu"  xPosition="before">
        <div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
        <mat-radio-group [(ngModel)]="menuvalue">
            <mat-radio-button >
                test
            </mat-radio-button>
            <mat-radio-button>
                test2
            </mat-radio-button>
            <mat-radio-button>
                test3
            </mat-radio-button>
        </mat-radio-group>
        </div>
    </mat-menu>
</ng-template>
</div>
bootstrap-4 angular-material twitter-bootstrap angular
1 Answers

The underlying issue is that material menu is not actually rendered inside the popover - it generates an overlay in the cdk-overlay-container, which is usually on the body level.

I would assume that bootstrap popover checks if the click event was outside the html node of the popover itself - and for mat-menu it will always be due to above.

I think you could solve this by providing a custom OverlayContainer (docs) in your component and specifying that the container for overlays should be inside a popover. Of course this requires proper encapsulation - otherwise everything relying on CDK overlays will be rendered inside that node.

The main takeaway is - it's probably not a great idea to mix two VERY different component frameworks.

TotallyNewb0
Related