Update react-tether package

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -87,6 +87,9 @@ class EnhancedSelectInput extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._buttonRef = {};
+    this._optionsRef = {};
+
     this.state = {
       isOpen: false,
       selectedIndex: getSelectedIndex(props),
@@ -106,14 +109,6 @@ class EnhancedSelectInput extends Component {
   //
   // Control
 
-  _setButtonRef = (ref) => {
-    this._buttonRef = ref;
-  }
-
-  _setOptionsRef = (ref) => {
-    this._optionsRef = ref;
-  }
-
   _addListener() {
     window.addEventListener('click', this.onWindowClick);
   }
@@ -126,8 +121,8 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef);
-    const options = ReactDOM.findDOMNode(this._optionsRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
+    const options = ReactDOM.findDOMNode(this._optionsRef.current);
 
     if (!button || this.state.isMobile) {
       return;
@@ -276,75 +271,91 @@ class EnhancedSelectInput extends Component {
             element: styles.tether
           }}
           {...tetherOptions}
-        >
-          <Measure
-            whitelist={['width']}
-            onMeasure={this.onMeasure}
-          >
-            <Link
-              ref={this._setButtonRef}
-              className={classNames(
-                className,
-                hasError && styles.hasError,
-                hasWarning && styles.hasWarning,
-                isDisabled && disabledClassName
-              )}
-              isDisabled={isDisabled}
-              onBlur={this.onBlur}
-              onKeyDown={this.onKeyDown}
-              onPress={this.onPress}
-            >
-              <SelectedValueComponent
-                {...selectedValueOptions}
-                {...selectedOption}
-                isDisabled={isDisabled}
-              >
-                {selectedOption ? selectedOption.value : null}
-              </SelectedValueComponent>
+          renderTarget={
+            (ref) => {
+              this._buttonRef = ref;
 
-              <div
-                className={isDisabled ?
-                  styles.dropdownArrowContainerDisabled :
-                  styles.dropdownArrowContainer
-                }
-              >
-                <Icon
-                  name={icons.CARET_DOWN}
-                />
-              </div>
-            </Link>
-          </Measure>
+              return (
+                <Measure
+                  whitelist={['width']}
+                  onMeasure={this.onMeasure}
+                >
+                  <div ref={ref}>
+                    <Link
+                      className={classNames(
+                        className,
+                        hasError && styles.hasError,
+                        hasWarning && styles.hasWarning,
+                        isDisabled && disabledClassName
+                      )}
+                      isDisabled={isDisabled}
+                      onBlur={this.onBlur}
+                      onKeyDown={this.onKeyDown}
+                      onPress={this.onPress}
+                    >
+                      <SelectedValueComponent
+                        {...selectedValueOptions}
+                        {...selectedOption}
+                        isDisabled={isDisabled}
+                      >
+                        {selectedOption ? selectedOption.value : null}
+                      </SelectedValueComponent>
 
-          {
-            isOpen && !isMobile &&
-              <div
-                ref={this._setOptionsRef}
-                className={styles.optionsContainer}
-                style={{
-                  minWidth: width
-                }}
-              >
-                <div className={styles.options}>
-                  {
-                    values.map((v, index) => {
-                      return (
-                        <OptionComponent
-                          key={v.key}
-                          id={v.key}
-                          isSelected={index === selectedIndex}
-                          {...v}
-                          isMobile={false}
-                          onSelect={this.onSelect}
-                        >
-                          {v.value}
-                        </OptionComponent>
-                      );
-                    })
-                  }
-                </div>
-              </div>
+                      <div
+                        className={isDisabled ?
+                          styles.dropdownArrowContainerDisabled :
+                          styles.dropdownArrowContainer
+                        }
+                      >
+                        <Icon
+                          name={icons.CARET_DOWN}
+                        />
+                      </div>
+                    </Link>
+                  </div>
+                </Measure>
+              );
+            }
           }
-        </TetherComponent>
+          renderElement={
+            (ref) => {
+              this._optionsRef = ref;
+
+              if (!isOpen || isMobile) {
+                return;
+              }
+
+              return (
+                <div
+                  ref={ref}
+                  className={styles.optionsContainer}
+                  style={{
+                    minWidth: width
+                  }}
+                >
+                  <div className={styles.options}>
+                    {
+                      values.map((v, index) => {
+                        return (
+                          <OptionComponent
+                            key={v.key}
+                            id={v.key}
+                            isSelected={index === selectedIndex}
+                            {...v}
+                            isMobile={false}
+                            onSelect={this.onSelect}
+                          >
+                            {v.value}
+                          </OptionComponent>
+                        );
+                      })
+                    }
+                  </div>
+                </div>
+              );
+            }
+          }
+        />
 
         {
           isMobile &&

frontend/src/Components/Menu/Menu.js

@@ -38,6 +38,9 @@ class Menu extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._menuRef = {};
+    this._menuContentRef = {};
+
     this.state = {
       isMenuOpen: false,
       maxHeight: 0
@@ -60,7 +63,7 @@ class Menu extends Component {
       return;
     }
 
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
 
     if (!menu) {
       return;
@@ -73,9 +76,13 @@ class Menu extends Component {
   }
 
   setMaxHeight() {
-    this.setState({
-      maxHeight: this.getMaxHeight()
-    });
+    const maxHeight = this.getMaxHeight();
+
+    if (maxHeight !== this.state.maxHeight) {
+      this.setState({
+        maxHeight
+      });
+    }
   }
 
   _addListener() {
@@ -99,10 +106,10 @@ class Menu extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
-    const menuContent = ReactDOM.findDOMNode(this.refs.menuContent);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
 
-    if (!menu) {
+    if (!menu || !menuContent) {
       return;
     }
 
@@ -116,7 +123,17 @@ class Menu extends Component {
     this.setMaxHeight();
   }
 
-  onWindowScroll = () => {
+  onWindowScroll = (event) => {
+    if (!this._menuContentRef.current) {
+      return;
+    }
+
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
+
+    if (menuContent && menuContent.contains(event.target)) {
+      return;
+    }
+
     this.setMaxHeight();
   }
 
@@ -158,35 +175,46 @@ class Menu extends Component {
       }
     );
 
-    const content = React.cloneElement(
-      childrenArray[1],
-      {
-        ref: 'menuContent',
-        alignMenu,
-        maxHeight,
-        isOpen: isMenuOpen
-      }
-    );
-
     return (
       <TetherComponent
         classes={{
           element: styles.tether
         }}
         {...tetherOptions[alignMenu]}
-      >
-        <div
-          ref="menu"
-          className={className}
-        >
-          {button}
-        </div>
+        renderTarget={
+          (ref) => {
+            this._menuRef = ref;
 
-        {
-          isMenuOpen &&
-            content
+            return (
+              <div
+                ref={ref}
+                className={className}
+              >
+                {button}
+              </div>
+            );
+          }
         }
-      </TetherComponent>
+        renderElement={
+          (ref) => {
+            this._menuContentRef = ref;
+
+            if (!isMenuOpen) {
+              return null;
+            }
+
+            return React.cloneElement(
+              childrenArray[1],
+              {
+                ref,
+                alignMenu,
+                maxHeight,
+                isOpen: isMenuOpen
+              }
+            );
+          }
+        }
+      />
     );
   }
 }

frontend/src/Components/Tooltip/Popover.js

@@ -105,42 +105,53 @@ class Popover extends Component {
           element: styles.tether
         }}
         {...tetherOptions[position]}
-      >
-        <span
-          className={className}
-          onClick={this.onClick}
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
-        >
-          {anchor}
-        </span>
-
-        {
-          this.state.isOpen &&
-            <div
-              className={styles.popoverContainer}
+        renderTarget={
+          (ref) => (
+            <span
+              ref={ref}
+              className={className}
+              onClick={this.onClick}
               onMouseEnter={this.onMouseEnter}
               onMouseLeave={this.onMouseLeave}
             >
-              <div className={styles.popover}>
-                <div
-                  className={classNames(
-                    styles.arrow,
-                    styles[position]
-                  )}
-                />
+              {anchor}
+            </span>
+          )
+        }
+        renderElement={
+          (ref) => {
+            if (!this.state.isOpen) {
+              return null;
+            }
 
-                <div className={styles.title}>
-                  {title}
-                </div>
+            return (
+              <div
+                ref={ref}
+                className={styles.popoverContainer}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
+              >
+                <div className={styles.popover}>
+                  <div
+                    className={classNames(
+                      styles.arrow,
+                      styles[position]
+                    )}
+                  />
 
-                <div className={styles.body}>
-                  {body}
+                  <div className={styles.title}>
+                    {title}
+                  </div>
+
+                  <div className={styles.body}>
+                    {body}
+                  </div>
                 </div>
               </div>
-            </div>
+            );
+          }
         }
-      </TetherComponent>
+      />
     );
   }
 }

frontend/src/Components/Tooltip/Tooltip.js

@@ -105,44 +105,55 @@ class Tooltip extends Component {
           element: styles.tether
         }}
         {...tetherOptions[position]}
-      >
-        <span
-          className={className}
-          onClick={this.onClick}
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
-        >
-          {anchor}
-        </span>
-
-        {
-          this.state.isOpen &&
-            <div
-              className={styles.tooltipContainer}
+        renderTarget={
+          (ref) => (
+            <span
+              ref={ref}
+              className={className}
+              onClick={this.onClick}
               onMouseEnter={this.onMouseEnter}
               onMouseLeave={this.onMouseLeave}
             >
+              {anchor}
+            </span>
+          )
+        }
+        renderElement={
+          (ref) => {
+            if (!this.state.isOpen) {
+              return;
+            }
+
+            return (
               <div
-                className={classNames(
-                  styles.tooltip,
-                  styles[kind]
-                )}
+                ref={ref}
+                className={styles.tooltipContainer}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
               >
                 <div
                   className={classNames(
-                    styles.arrow,
-                    styles[kind],
-                    styles[position]
+                    styles.tooltip,
+                    styles[kind]
                   )}
-                />
+                >
+                  <div
+                    className={classNames(
+                      styles.arrow,
+                      styles[kind],
+                      styles[position]
+                    )}
+                  />
 
-                <div className={styles.body}>
-                  {tooltip}
+                  <div className={styles.body}>
+                    {tooltip}
+                  </div>
                 </div>
               </div>
-            </div>
+            );
+          }
         }
-      </TetherComponent>
+      />
     );
   }
 }