DDF-4903 Fix render loop caused by poller in dropdown.js (#4906)

codice · Jun 4, 2019 · 1ed85a7 · 1ed85a7
1 parent 0bbfffe
commit 1ed85a7
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/ui/packages/catalog-ui-search/src/main/webapp/react-component/dropdown/dropdown.js b/ui/packages/catalog-ui-search/src/main/webapp/react-component/dropdown/dropdown.js
@@ -2,6 +2,7 @@ const React = require('react')
 const { createPortal } = require('react-dom')
 
 import styled from '../styles/styled-components'
+import isEqual from 'lodash/isEqual'
 
 class Poller extends React.Component {
   constructor(props) {
@@ -17,7 +18,10 @@ class Poller extends React.Component {
     window.cancelAnimationFrame(this.id)
   }
   loop = () => {
-    this.setState(this.props.fn())
+    const state = this.props.fn()
+    if (!isEqual(state, this.state)) {
+      this.setState(state)
+    }
     this.id = window.requestAnimationFrame(this.loop)
   }
   render() {
@@ -160,8 +164,9 @@ class Dropdown extends React.Component {
     }
   }
   getRect = () => {
-    const rect = this.ref !== undefined ? this.ref.getBoundingClientRect() : {}
-    return { rect }
+    const { x, y, width, height } =
+      this.ref !== undefined ? this.ref.getBoundingClientRect() : {}
+    return { rect: { x, y, width, height } }
   }
   componentDidMount() {
     document.addEventListener('mousedown', this.onMouseDown)