Conditionally set attributes in EuiMutationObserver options

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `13.1.0`.
+**Bug fixes**
+
+- Fixed `EuiMutationObserver` errors in IE11 by conditionally setting the `attributes` observer option according to the new spec ([#2180](https://github.com/elastic/eui/pull/2180))
 
 ## [`13.1.0`](https://github.com/elastic/eui/tree/v13.1.0)
 

src/components/observer/mutation_observer/mutation_observer.ts

@@ -12,7 +12,22 @@ export class EuiMutationObserver extends EuiObserver<Props> {
   name = 'EuiMutationObserver';
 
   beginObserve = () => {
+    // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+    // an older spec in which specifying `attributeOldValue` or `attributeFilter`
+    // without specifying `attributes` results in a `SyntaxError`.
+    // The following logic patches the newer spec in which `attributes: true` can be
+    // implied when appropriate (`attributeOldValue` or `attributeFilter` is specified).
+    const observerOptions: MutationObserverInit = {
+      ...this.props.observerOptions,
+    };
+    const needsAttributes =
+      observerOptions.hasOwnProperty('attributeOldValue') ||
+      observerOptions.hasOwnProperty('attributeFilter');
+    if (needsAttributes && !observerOptions.hasOwnProperty('attributes')) {
+      observerOptions.attributes = true;
+    }
+
     this.observer = new MutationObserver(this.props.onMutation);
-    this.observer.observe(this.childNode!, this.props.observerOptions);
+    this.observer.observe(this.childNode!, observerOptions);
   };
 }