Prevent calculation on null childNode during resize observation (#1784)

* prevent calculation on null childNode during resize observation * #1784 changelog entry
elastic · Apr 2, 2019 · 82bc8ba · 82bc8ba
1 parent 8c06fe9
commit 82bc8ba
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,8 @@
 
 **Bug fixes**
 
-Update ButtonIconColor type to provide all available options ([#1783](https://github.com/elastic/eui/pull/1783))
+- Update ButtonIconColor type to provide all available options ([#1783](https://github.com/elastic/eui/pull/1783))
+- Prevent calculation on `null` ref during `EuiResizeObserver` observation ([#1784](https://github.com/elastic/eui/pull/1784))
 
 ## [`9.7.1`](https://github.com/elastic/eui/tree/v9.7.1)
 

diff --git a/src/components/observer/observer.js b/src/components/observer/observer.js
@@ -24,14 +24,14 @@ class EuiObserver extends Component {
   updateChildNode = ref => {
     if (this.childNode === ref) return; // node hasn't changed
 
-    this.childNode = ref;
-
     // if there's an existing observer disconnect it
     if (this.observer != null) {
       this.observer.disconnect();
       this.observer = null;
     }
 
+    this.childNode = ref;
+
     if (this.childNode != null) {
       this.beginObserve();
     }

diff --git a/src/components/observer/resize_observer/resize_observer.js b/src/components/observer/resize_observer/resize_observer.js
@@ -11,12 +11,14 @@ class EuiResizeObserver extends EuiObserver {
   }
 
   onResize = () => {
-    // Eventually use `clientRect` on the `entries[]` returned natively
-    const { height, width } = this.childNode.getBoundingClientRect();
-    this.props.onResize({
-      height,
-      width
-    });
+    if (this.childNode != null) {
+      // Eventually use `clientRect` on the `entries[]` returned natively
+      const { height, width } = this.childNode.getBoundingClientRect();
+      this.props.onResize({
+        height,
+        width
+      });
+    }
   }
 
   beginObserve = () => {