Expected behaviorActual behaviorResources (screenshots, code snippets etc.)

Problem

i showing modal form with select component. i get option list from service.When 1st click to show the modal form, select component behave properly, but subsequent click to show the modal form, select option list render behind the form.i don't have any custom CSS and I don't know what happen.Please someone help me?

ts

AssignClick(Selected: ActiveOrderDtoSimple) { let selectionOption: SelectionOption[] = [];

    this.accountService.GetUsersWithRole('Driver').subscribe(
        (reply: BaseResponseWithData<UserWithRole[]>) => {
            reply.Data.forEach((element) => {
                selectionOption.push({ value: element.UserId, label: element.DisplayName });
            });

            this.mdbModalRef = this.mdbModalService.show(SelectionPopupComponent, {
                data: {
                    title: 'Select Driver',
                    placeholder: 'Select Driver',
                    selectionOption: selectionOption,
                },
            });

            this.mdbModalRef.content.Result.subscribe((result: any) => {
                if (result) {
                    this.orderService.AssignToPickup(Selected.Id, result).subscribe(
                        (reply: BaseResponseWithData<OrderDto>) => {
                            if (reply.Success) {
                                //Remove record from array
                                this.ActiveElements.splice(
                                    this.ActiveElements.findIndex((x) => x.Id === Selected.Id),
                                    1
                                );
                            }
                        },
                        (error) => {
                            console.log('Network Error');
                        }
                    );
                }
                this.mdbModalRef.hide();
            });
        },
        (error) => {}
    );
}

html

<mdb-card class="rounded-top">
    <mdb-card-header class="text-white WeBg">
        {{ title }}
    </mdb-card-header>
    <mdb-card-body>
        <mdb-select-2 [outline]="true" [formControl]="selectControl">
            <mdb-select-option *ngFor="let option of selectionOption2" [value]="option.value">{{ option.label }}</mdb-select-option>
        </mdb-select-2>
    </mdb-card-body>
    <mdb-card-footer>
        <div class="d-flex justify-content-center">
            <button mdbBtn class="white-text waves-light WeBg" (click)="onCancelClicked()" mdbWavesEffect>Cancel</button>
            <button mdbBtn class="white-text waves-light WeBg" (click)="onOKClicked()" mdbWavesEffect>OK</button>
        </div>
    </mdb-card-footer>
</mdb-card>