MOBILE-2314 core: Fix custom modals lifecycle

Author: NoelDeMartin

src/core/components/sheet-modal/sheet-modal.ts

@@ -34,6 +34,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
 
     private element: HTMLElement;
     private wrapperElement = new CorePromisedValue<HTMLElement>();
+    private content?: HTMLElement;
 
     constructor({ nativeElement: element }: ElementRef<HTMLElement>) {
         this.element = element;
@@ -61,7 +62,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
      */
     async show(): Promise<T> {
         const wrapper = await this.wrapperElement;
-        const element = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {});
+        this.content = await AngularFrameworkDelegate.attachViewToDom(wrapper, this.component, this.componentProps ?? {});
 
         await CoreUtils.nextTick();
 
@@ -71,7 +72,7 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
         await CoreUtils.nextTick();
         await CoreUtils.wait(300);
 
-        const instance = CoreDirectivesRegistry.resolve(element, this.component);
+        const instance = CoreDirectivesRegistry.resolve(this.content, this.component);
 
         if (!instance) {
             throw new Error('Modal not mounted properly');
@@ -84,10 +85,13 @@ export class CoreSheetModalComponent<T extends CoreModalComponent> implements Af
      * Hide modal.
      */
     async hide(): Promise<void> {
+        const wrapper = await this.wrapperElement;
+
         this.element.classList.remove('active');
 
         await CoreUtils.nextTick();
         await CoreUtils.wait(300);
+        await AngularFrameworkDelegate.removeViewFromDom(wrapper, this.content);
     }
 
 }

src/core/features/fileuploader/components/audio-recorder/audio-recorder.component.ts

@@ -86,7 +86,11 @@ export class CoreFileUploaderAudioRecorderComponent extends CoreModalComponent<C
      * @inheritdoc
      */
     ngOnDestroy(): void {
-        this.media$.value?.recorder.stop();
+        const recorder = this.media$.value?.recorder;
+
+        if (recorder && recorder.state !== 'inactive') {
+            recorder.stop();
+        }
     }
 
     /**

src/core/services/modals.ts

@@ -76,8 +76,8 @@ export class CoreModalsService {
 
         modal.result.finally(async () => {
             await sheetModal.hide();
+            await AngularFrameworkDelegate.removeViewFromDom(container, element);
 
-            element.remove();
             viewContainer?.removeAttribute('aria-hidden');
         });