MM-53230 : Remove custom polyfilled 'getClosestParent' with browser 'closest' (#24086)

webapp/channels/src/components/suggestion/modal_suggestion_list.tsx

@@ -4,7 +4,6 @@
 import React from 'react';
 
 import SuggestionList from 'components/suggestion/suggestion_list';
-import {getClosestParent} from 'utils/utils';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface SuggestionItem {}
@@ -88,7 +87,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
 
     componentDidMount() {
         if (this.container.current) {
-            const modalBodyContainer = getClosestParent(this.container.current, '.modal-body');
+            const modalBodyContainer = this.container.current.closest('.modal-body');
             modalBodyContainer?.addEventListener('scroll', this.onModalScroll);
         }
         window.addEventListener('resize', this.updateModalBounds);
@@ -96,7 +95,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
 
     componentWillUnmount() {
         if (this.container.current) {
-            const modalBodyContainer = getClosestParent(this.container.current, '.modal-body');
+            const modalBodyContainer = this.container.current.closest('.modal-body');
             modalBodyContainer?.removeEventListener('scroll', this.onModalScroll);
         }
         window.removeEventListener('resize', this.updateModalBounds);
@@ -116,7 +115,8 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             this.updatePosition(newInputBounds);
 
             if (this.container.current) {
-                const modalBodyRect = getClosestParent(this.container.current, '.modal-body')?.getBoundingClientRect();
+                const modalBodyContainer = this.container.current.closest('.modal-body');
+                const modalBodyRect = modalBodyContainer?.getBoundingClientRect();
                 if (modalBodyRect && ((newInputBounds.bottom < modalBodyRect.top) || (newInputBounds.top > modalBodyRect.bottom))) {
                     this.props.onLoseVisibility();
                     return;
@@ -180,8 +180,8 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             return;
         }
 
-        const modalContainer = getClosestParent(this.container.current, '.modal-content');
-        const modalBounds = modalContainer?.getBoundingClientRect();
+        const modalBodyContainer = this.container.current.closest('.modal-body');
+        const modalBounds = modalBodyContainer?.getBoundingClientRect();
 
         if (modalBounds) {
             if (this.state.modalBounds.top !== modalBounds.top || this.state.modalBounds.bottom !== modalBounds.bottom) {

webapp/channels/src/utils/utils.tsx

@@ -1571,43 +1571,6 @@ export function setCSRFFromCookie() {
     }
 }
 
-/**
- * Get closest parent which match selector
- */
-export function getClosestParent(elem: HTMLElement, selector: string) {
-    // Element.matches() polyfill
-    if (!Element.prototype.matches) {
-        Element.prototype.matches =
-            (Element.prototype as any).matchesSelector ||
-            (Element.prototype as any).mozMatchesSelector ||
-            (Element.prototype as any).msMatchesSelector ||
-            (Element.prototype as any).oMatchesSelector ||
-            (Element.prototype as any).webkitMatchesSelector ||
-            ((s) => {
-                // @ts-expect-error // TODO: resolve this typing and see if using function this is necessary
-                const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-                let i = matches.length - 1;
-
-                // @ts-expect-error // TODO: resolve this typing and see if using function this is necessary
-                while (i >= 0 && matches.item(i) !== this) {
-                    i--;
-                }
-                return i > -1;
-            });
-    }
-
-    // Get the closest matching element
-    let currentElem = elem;
-
-    // @ts-expect-error // TODO: resolve this typing and see if using function this is necessary
-    for (; currentElem && currentElem !== document; currentElem = currentElem.parentNode) {
-        if (currentElem.matches(selector)) {
-            return currentElem;
-        }
-    }
-    return null;
-}
-
 export function getNextBillingDate() {
     const nextBillingDate = moment().add(1, 'months').startOf('month');
     return nextBillingDate.format('MMM D, YYYY');