From fa3f802aa009c14878122babe834dc547c88bf33 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 6 Sep 2018 12:21:00 -0600
Subject: [PATCH] use resize observer instead of mutation observer

---
 src-docs/src/views/header/global_query.js | 45 +++++++++++------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src-docs/src/views/header/global_query.js b/src-docs/src/views/header/global_query.js
index 86bd53dfc86..72f2068eaf5 100644
--- a/src-docs/src/views/header/global_query.js
+++ b/src-docs/src/views/header/global_query.js
@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
-
+import ResizeObserver from 'resize-observer-polyfill';
 import {
   EuiFilterButton,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiMutationObserver,
 } from '../../../../src/components';
 
 import { GlobalFilterBar } from './global_filter_bar';
@@ -58,6 +57,8 @@ export default class extends Component {
       ],
       query: '',
     };
+
+    this.ro = new ResizeObserver(this.setFilterBarHeight);
   }
 
   setFilterBarHeight = () => {
@@ -69,10 +70,12 @@ export default class extends Component {
 
   componentDidMount() {
     this.setFilterBarHeight();
+    this.ro.observe(this.filterBar);
   }
 
   componentDidUpdate() {
     this.setFilterBarHeight();
+    this.ro.unobserve(this.filterBar);
   }
 
   toggleFilterVisibility = () => {
@@ -132,28 +135,22 @@ export default class extends Component {
           ref={node => { this.filterBarWrapper = node; }}
           className={classes}
         >
-          <EuiMutationObserver
-            observerOptions={{ childList: true, subtree: true }}
-            onMutation={this.setFilterBarHeight}
-          >
-            <div ref={this.setFilterBarRef}>
-              <EuiFlexGroup
-                className="globalFilterGroup"
-                gutterSize="none"
-                alignItems="flexStart"
-                responsive={false}
-              >
-                <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
-                  <GlobalFilterOptions />
-                </EuiFlexItem>
-
-                <EuiFlexItem>
-                  <GlobalFilterBar className="globalFilterGroup__filterBar" filters={this.state.filters} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </div>
-
-          </EuiMutationObserver>
+          <div ref={this.setFilterBarRef}>
+            <EuiFlexGroup
+              className="globalFilterGroup"
+              gutterSize="none"
+              alignItems="flexStart"
+              responsive={false}
+            >
+              <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
+                <GlobalFilterOptions />
+              </EuiFlexItem>
+
+              <EuiFlexItem>
+                <GlobalFilterBar className="globalFilterGroup__filterBar" filters={this.state.filters} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
         </div>
 
       </React.Fragment>