My challenge is to add new users to my app using a modal registration process. However, I encounter an issue when attempting to make two calls in the component: 1- registering on Firebase and 2- registering on DB. Due to this, the modal closes abruptly, and the page reverts to the previous one, prompting an error in the log.
Seeking assistance to resolve this issue.
register.page.html
<ion-content>
<ion-fab (click)="setOpen('isModalOpen', true)" vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button id="user-modal">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-modal trigger="user-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start"gt;
<ion-button (click)="cancel()">
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Create User</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item class="new-user">
<ion-label position="floating">Email:</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-button (click)="sendUser()">Cadastrar</ion-button>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
register.page.ts
@Component({
selector: 'register-admin',
templateUrl: './register-admin.page.html',
styleUrls: ['./register-admin.page.scss'],
})
export class RegisterPage implements OnInit {
@ViewChild(IonModal) modal: IonModal;
constructor(private userService: UserService) {}
sendUser() {
this.userService.createUser(user)
.then(() => {
this.userService.createUserInfo(user)
.then(() => {
alert('User created!');
this.modal.dismiss(null, 'cancel');
});
}).catch(err => {
if (err.message.includes('already')) {
alert('Already Created');
} else if (err.message.includes('Password')) {
alert('Password have to be more than 6 digits.');
} else {
alert('Try again Later');
}
});
}
user.service.ts
createUser(user) {
return this.fireAuth.createUserWithEmailAndPassword(user.email, user.pass)
}
resetPassword(email: string) {
return this.fireAuth.sendPasswordResetEmail(email);
}
createUserInfo(user: any) {
return this.db.list('/user').push({
name: user.name,
email: user.email,
admin: user.admin === 'true' ? true : false,
type: user.type
});
}
Upon invoking the function, I consistently encounter issues such as the modal closing prematurely or freezing the screen while displaying the following console error:
Uncaught RangeError: Maximum call stack size exceeded.
at focusElement (helpers-eed79a2b.js:158:1)
at focusFirstDescendant (overlays-4fbe89bd.js:4095:17)
at trapShadowFocus (overlays-4fbe89bd.js:4235:7)
at trapKeyboardFocus (overlays-4fbe89bd.js:4252:5)
at HTMLDocument.<anonymous> (overlays-4fbe89bd.js:4261:41)
at ZoneDelegate.invokeTask (zone.js:434:1)
at Zone.runTask (zone.js:205:1)
at ZoneTask.invokeTask [as invoke] (zone.js:516:1)
at invokeTask (zone.js:1656:1)
at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1725:1)Note: The error may also originate from focusLastDescendant.
I examined the focus behavior of the modal but found no apparent issues causing the error upon closure. When testing with a single promise call, the functionality works without errors; hence, it points towards a specific interaction with the dual promises. It's unclear whether other project elements impact this component. I have a similar page with only one promise call that functions perfectly fine.