[Canvas] Fix incompatible ie11 method (#50007) (#50480)

* Fix incompatible ie11 method

* Comment about origin of polyfill

x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js

@@ -58,6 +58,21 @@ const configuration = {
   tooltipZ: 1100,
 };
 
+// Polyfill for browsers (IE11) that don't have element.closest
+// From: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+function closest(s) {
+  let el = this;
+  const matchFn = el.matches ? 'matches' : 'msMatchesSelector';
+
+  do {
+    if (el[matchFn](s)) {
+      return el;
+    }
+    el = el.parentElement || el.parentNode;
+  } while (el !== null && el.nodeType === 1);
+  return null;
+}
+
 const componentLayoutState = ({
   aeroStore,
   setAeroStore,
@@ -193,8 +208,15 @@ export const InteractivePage = compose(
   })),
   withProps((...props) => ({
     ...props,
-    canDragElement: element =>
-      !element.closest('.embeddable') || element.closest('.embPanel__header'),
+    canDragElement: element => {
+      const hasClosest = typeof element.closest === 'function';
+
+      if (hasClosest) {
+        return !element.closest('.embeddable') || element.closest('.embPanel__header');
+      } else {
+        return !closest.call(element, '.embeddable') || closest.call(element, '.embPanel__header');
+      }
+    },
   })),
   withHandlers(eventHandlers), // Captures user intent, needs to have reconciled state
   () => InteractiveComponent