Update react-tether package

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js

@@ -34,6 +34,8 @@ class ImportSeriesSelectSeries extends Component {
     super(props, context);
 
     this._seriesLookupTimeout = null;
+    this._buttonRef = {};
+    this._contentRef = {};
 
     this.state = {
       term: props.id,
@@ -44,14 +46,6 @@ class ImportSeriesSelectSeries extends Component {
   //
   // Control
 
-  _setButtonRef = (ref) => {
-    this._buttonRef = ref;
-  }
-
-  _setContentRef = (ref) => {
-    this._contentRef = ref;
-  }
-
   _addListener() {
     window.addEventListener('click', this.onWindowClick);
   }
@@ -64,14 +58,18 @@ class ImportSeriesSelectSeries extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
-    const content = ReactDOM.findDOMNode(this._contentRef);
+    const content = ReactDOM.findDOMNode(this._contentRef.current);
 
-    if (!button) {
+    if (!button || !content) {
       return;
     }
 
-    if (!button.contains(event.target) && content && !content.contains(event.target) && this.state.isOpen) {
+    if (
+      !button.contains(event.target) &&
+      !content.contains(event.target) &&
+      this.state.isOpen
+    ) {
       this.setState({ isOpen: false });
       this._removeListener();
     }
@@ -134,42 +132,49 @@ class ImportSeriesSelectSeries extends Component {
           element: styles.tether
         }}
         {...tetherOptions}
-      >
+        renderTarget={
+          (ref) => {
+            this._buttonRef = ref;
+
+            return (
+              <div ref={ref}>
                 <Link
-          ref={this._setButtonRef}
                   className={styles.button}
                   component="div"
                   onPress={this.onPress}
                 >
                   {
-            isLookingUpSeries && isQueued && !isPopulated &&
+                    isLookingUpSeries && isQueued && !isPopulated ?
                       <LoadingIndicator
                         className={styles.loading}
                         size={20}
-              />
+                      /> :
+                      null
                   }
 
                   {
-            isPopulated && selectedSeries && isExistingSeries &&
+                    isPopulated && selectedSeries && isExistingSeries ?
                       <Icon
                         className={styles.warningIcon}
                         name={icons.WARNING}
                         kind={kinds.WARNING}
-              />
+                      /> :
+                      null
                   }
 
                   {
-            isPopulated && selectedSeries &&
+                    isPopulated && selectedSeries ?
                       <ImportSeriesTitle
                         title={selectedSeries.title}
                         year={selectedSeries.year}
                         network={selectedSeries.network}
                         isExistingSeries={isExistingSeries}
-              />
+                      /> :
+                      null
                   }
 
                   {
-            isPopulated && !selectedSeries &&
+                    isPopulated && !selectedSeries ?
                       <div className={styles.noMatches}>
                         <Icon
                           className={styles.warningIcon}
@@ -178,11 +183,12 @@ class ImportSeriesSelectSeries extends Component {
                         />
 
                 No match found!
-              </div>
+                      </div> :
+                      null
                   }
 
                   {
-            !isFetching && !!error &&
+                    !isFetching && !!error ?
                       <div>
                         <Icon
                           className={styles.warningIcon}
@@ -192,7 +198,8 @@ class ImportSeriesSelectSeries extends Component {
                         />
 
                 Search failed, please try again later.
-              </div>
+                      </div> :
+                      null
                   }
 
                   <div className={styles.dropdownArrowContainer}>
@@ -201,11 +208,21 @@ class ImportSeriesSelectSeries extends Component {
                     />
                   </div>
                 </Link>
+              </div>
+            );
+          }
+        }
+        renderElement={
+          (ref) => {
+            this._contentRef = ref;
 
-        {
+            if (!this.state.isOpen) {
-          this.state.isOpen &&
+              return;
+            }
+
+            return (
               <div
-              ref={this._setContentRef}
+                ref={ref}
                 className={styles.contentContainer}
               >
                 <div className={styles.content}>
@@ -250,8 +267,10 @@ class ImportSeriesSelectSeries extends Component {
                   </div>
                 </div>
               </div>
+            );
           }
-      </TetherComponent>
+        }
+      />
     );
   }
 }

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 button = ReactDOM.findDOMNode(this._buttonRef.current);
-    const options = ReactDOM.findDOMNode(this._optionsRef);
+    const options = ReactDOM.findDOMNode(this._optionsRef.current);
 
     if (!button || this.state.isMobile) {
       return;
@@ -276,13 +271,17 @@ class EnhancedSelectInput extends Component {
             element: styles.tether
           }}
           {...tetherOptions}
-        >
+          renderTarget={
+            (ref) => {
+              this._buttonRef = ref;
+
+              return (
                 <Measure
                   whitelist={['width']}
                   onMeasure={this.onMeasure}
                 >
+                  <div ref={ref}>
                     <Link
-              ref={this._setButtonRef}
                       className={classNames(
                         className,
                         hasError && styles.hasError,
@@ -313,12 +312,22 @@ class EnhancedSelectInput extends Component {
                         />
                       </div>
                     </Link>
+                  </div>
                 </Measure>
+              );
+            }
+          }
+          renderElement={
+            (ref) => {
+              this._optionsRef = ref;
 
-          {
+              if (!isOpen || isMobile) {
-            isOpen && !isMobile &&
+                return;
+              }
+
+              return (
                 <div
-                ref={this._setOptionsRef}
+                  ref={ref}
                   className={styles.optionsContainer}
                   style={{
                     minWidth: width
@@ -343,8 +352,10 @@ class EnhancedSelectInput extends Component {
                     }
                   </div>
                 </div>
+              );
             }
-        </TetherComponent>
+          }
+        />
 
         {
           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,10 +76,14 @@ class Menu extends Component {
   }
 
   setMaxHeight() {
+    const maxHeight = this.getMaxHeight();
+
+    if (maxHeight !== this.state.maxHeight) {
       this.setState({
-      maxHeight: this.getMaxHeight()
+        maxHeight
       });
     }
+  }
 
   _addListener() {
     // Listen to resize events on the window and scroll events
@@ -99,10 +106,10 @@ class Menu extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
-    const menuContent = ReactDOM.findDOMNode(this.refs.menuContent);
+    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]}
-      >
+        renderTarget={
+          (ref) => {
+            this._menuRef = ref;
+
+            return (
               <div
-          ref="menu"
+                ref={ref}
                 className={className}
               >
                 {button}
               </div>
-
+            );
-        {
-          isMenuOpen &&
-            content
           }
-      </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,8 +105,10 @@ class Popover extends Component {
           element: styles.tether
         }}
         {...tetherOptions[position]}
-      >
+        renderTarget={
+          (ref) => (
             <span
+              ref={ref}
               className={className}
               onClick={this.onClick}
               onMouseEnter={this.onMouseEnter}
@@ -114,10 +116,17 @@ class Popover extends Component {
             >
               {anchor}
             </span>
+          )
+        }
+        renderElement={
+          (ref) => {
+            if (!this.state.isOpen) {
+              return null;
+            }
 
-        {
+            return (
-          this.state.isOpen &&
               <div
+                ref={ref}
                 className={styles.popoverContainer}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
@@ -139,8 +148,10 @@ class Popover extends Component {
                   </div>
                 </div>
               </div>
+            );
           }
-      </TetherComponent>
+        }
+      />
     );
   }
 }

frontend/src/Components/Tooltip/Tooltip.js

@@ -105,8 +105,10 @@ class Tooltip extends Component {
           element: styles.tether
         }}
         {...tetherOptions[position]}
-      >
+        renderTarget={
+          (ref) => (
             <span
+              ref={ref}
               className={className}
               onClick={this.onClick}
               onMouseEnter={this.onMouseEnter}
@@ -114,10 +116,17 @@ class Tooltip extends Component {
             >
               {anchor}
             </span>
+          )
+        }
+        renderElement={
+          (ref) => {
+            if (!this.state.isOpen) {
+              return;
+            }
 
-        {
+            return (
-          this.state.isOpen &&
               <div
+                ref={ref}
                 className={styles.tooltipContainer}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
@@ -141,8 +150,10 @@ class Tooltip extends Component {
                   </div>
                 </div>
               </div>
+            );
           }
-      </TetherComponent>
+        }
+      />
     );
   }
 }

package.json

@@ -101,7 +101,7 @@
     "react-router-dom": "4.3.1",
     "react-slider": "0.11.2",
     "react-tabs": "3.0.0",
-    "react-tether": "1.0.1",
+    "react-tether": "2.0.0",
     "react-text-truncate": "0.14.0",
     "react-virtualized": "9.21.0",
     "redux": "4.0.1",

yarn.lock

@@ -6940,13 +6940,13 @@ react-tabs@3.0.0:
     classnames "^2.2.0"
     prop-types "^15.5.0"
 
-react-tether@1.0.1:
+react-tether@2.0.0:
-  version "1.0.1"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-1.0.1.tgz#6e5173764d4f9b8bef6d1b20ff51972909674942"
+  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-2.0.0.tgz#84928b9636f1fe0a6874d1e450e7822e87f8cb07"
-  integrity sha512-OsgGk2hmsIpnpMl1Uq9aYKopG4V7bDuz2msNYPaRosF0CBbpa1YVF9P1qJ8MRsf1Zj/oK/I2uH++S+ffqxL98A==
+  integrity sha512-iJnqTQV42Pf7w4xrg3g1gxSxbBCXleDt8AzlSoAqRINqB+mhcJUeegpB8SFMJ/nKT7lSfMkx3GvUfYY+9sPBGw==
   dependencies:
-    prop-types "^15.5.8"
+    prop-types "^15.6.2"
-    tether "^1.4.3"
+    tether "^1.4.5"
 
 react-text-truncate@0.14.0:
   version "0.14.0"
@@ -8243,7 +8243,7 @@ terser@^3.16.1:
     source-map "~0.6.1"
     source-map-support "~0.5.9"
 
-tether@^1.4.3:
+tether@^1.4.5:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.5.tgz#8efd7b35572767ba502259ba9b1cc167fcf6f2c1"
   integrity sha512-fysT1Gug2wbRi7a6waeu39yVDwiNtvwj5m9eRD+qZDSHKNghLo6KqP/U3yM2ap6TNUL2skjXGJaJJTJqoC31vw==