MOBILE-3814 chore: Deprecate closest on CoreDomUtils

src/core/components/navbar-buttons/navbar-buttons.ts

@@ -198,7 +198,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
      * @return Promise resolved with the header element.
      */
     protected async searchHeader(retries: number = 0): Promise<HTMLElement> {
-        let parentPage: HTMLElement = this.element;
+        let parentPage: HTMLElement | null = this.element;
 
         while (parentPage) {
             if (!parentPage.parentElement) {
@@ -207,7 +207,7 @@ export class CoreNavBarButtonsComponent implements OnInit, OnDestroy {
             }
 
             // Get the next parent page.
-            parentPage = <HTMLElement> CoreDomUtils.closest(parentPage.parentElement, '.ion-page');
+            parentPage = parentPage.parentElement.closest('.ion-page');
             if (parentPage) {
                 // Check if the page has a header. If it doesn't, search the next parent page.
                 const header = this.searchHeaderInPage(parentPage);

src/core/directives/external-content.ts

@@ -27,7 +27,6 @@ import { CoreApp } from '@services/app';
 import { CoreFile } from '@services/file';
 import { CoreFilepool, CoreFilepoolFileActions, CoreFilepoolFileEventData } from '@services/filepool';
 import { CoreSites } from '@services/sites';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUrlUtils } from '@services/utils/url';
 import { CoreUtils } from '@services/utils/utils';
 import { Platform } from '@singletons';
@@ -418,13 +417,14 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
         // Set events to download big files (not downloaded automatically).
         if (targetAttr !== 'poster' && (tagName === 'VIDEO' || tagName === 'AUDIO' || tagName === 'A' || tagName === 'SOURCE')) {
             const eventName = tagName == 'A' ? 'click' : 'play';
-            let clickableEl = this.element;
+            let clickableEl: Element | null = this.element;
 
             if (tagName == 'SOURCE') {
-                clickableEl = <HTMLElement> CoreDomUtils.closest(this.element, 'video,audio');
-                if (!clickableEl) {
-                    return;
-                }
+                clickableEl = this.element.closest('video,audio');
+            }
+
+            if (!clickableEl) {
+                return;
             }
 
             clickableEl.addEventListener(eventName, () => {

src/core/features/question/classes/base-question-component.ts

@@ -458,7 +458,7 @@ export class CoreQuestionBaseComponent {
             name: input.name,
             value: input.value,
             readOnly: input.readOnly,
-            isInline: !!CoreDomUtils.closest(input, '.qtext'), // The answer can be inside the question text.
+            isInline: !!input.closest('.qtext'), // The answer can be inside the question text.
         };
 
         // Check if question is marked as correct.

src/core/features/question/services/question-helper.ts

@@ -258,7 +258,7 @@ export class CoreQuestionHelperProvider {
         // Get the last element and check it's not in the question contents.
         let last = matches.pop();
         while (last) {
-            if (!CoreDomUtils.closest(last, '.formulation')) {
+            if (!last.closest('.formulation')) {
                 // Not in question contents. Add it to a separate attribute and remove it from the HTML.
                 question[attrName] = last.innerHTML;
                 last.parentElement?.removeChild(last);

src/core/services/utils/dom.ts

@@ -99,45 +99,10 @@ export class CoreDomUtilsProvider {
      * @param element DOM Element.
      * @param selector Selector to search.
      * @return Closest ancestor.
+     * @deprecated Not needed anymore since it's supported on both Android and iOS. Use closest instead.
      */
     closest(element: Element | undefined | null, selector: string): Element | null {
-        if (!element) {
-            return null;
-        }
-
-        // Try to use closest if the browser supports it.
-        if (typeof element.closest == 'function') {
-            return element.closest(selector);
-        }
-
-        if (!this.matchesFunctionName) {
-            // Find the matches function supported by the browser.
-            ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some((fn) => {
-                if (typeof document.body[fn] == 'function') {
-                    this.matchesFunctionName = fn;
-
-                    return true;
-                }
-
-                return false;
-            });
-
-            if (!this.matchesFunctionName) {
-                return null;
-            }
-        }
-
-        // Traverse parents.
-        let elementToTreat: Element | null = element;
-
-        while (elementToTreat) {
-            if (elementToTreat[this.matchesFunctionName](selector)) {
-                return elementToTreat;
-            }
-            elementToTreat = elementToTreat.parentElement;
-        }
-
-        return null;
+        return element?.closest(selector) ?? null;
     }
 
     /**