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 content = ReactDOM.findDOMNode(this._contentRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
+    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,124 +132,145 @@ class ImportSeriesSelectSeries extends Component {
           element: styles.tether
         }}
         {...tetherOptions}
-      >
-        <Link
-          ref={this._setButtonRef}
-          className={styles.button}
-          component="div"
-          onPress={this.onPress}
-        >
-          {
-            isLookingUpSeries && isQueued && !isPopulated &&
-              <LoadingIndicator
-                className={styles.loading}
-                size={20}
-              />
-          }
+        renderTarget={
+          (ref) => {
+            this._buttonRef = ref;
 
-          {
-            isPopulated && selectedSeries && isExistingSeries &&
-              <Icon
-                className={styles.warningIcon}
-                name={icons.WARNING}
-                kind={kinds.WARNING}
-              />
-          }
+            return (
+              <div ref={ref}>
+                <Link
+                  className={styles.button}
+                  component="div"
+                  onPress={this.onPress}
+                >
+                  {
+                    isLookingUpSeries && isQueued && !isPopulated ?
+                      <LoadingIndicator
+                        className={styles.loading}
+                        size={20}
+                      /> :
+                      null
+                  }
 
-          {
-            isPopulated && selectedSeries &&
-              <ImportSeriesTitle
-                title={selectedSeries.title}
-                year={selectedSeries.year}
-                network={selectedSeries.network}
-                isExistingSeries={isExistingSeries}
-              />
-          }
+                  {
+                    isPopulated && selectedSeries && isExistingSeries ?
+                      <Icon
+                        className={styles.warningIcon}
+                        name={icons.WARNING}
+                        kind={kinds.WARNING}
+                      /> :
+                      null
+                  }
 
-          {
-            isPopulated && !selectedSeries &&
-              <div className={styles.noMatches}>
-                <Icon
-                  className={styles.warningIcon}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
+                  {
+                    isPopulated && selectedSeries ?
+                      <ImportSeriesTitle
+                        title={selectedSeries.title}
+                        year={selectedSeries.year}
+                        network={selectedSeries.network}
+                        isExistingSeries={isExistingSeries}
+                      /> :
+                      null
+                  }
+
+                  {
+                    isPopulated && !selectedSeries ?
+                      <div className={styles.noMatches}>
+                        <Icon
+                          className={styles.warningIcon}
+                          name={icons.WARNING}
+                          kind={kinds.WARNING}
+                        />
 
                 No match found!
-              </div>
-          }
+                      </div> :
+                      null
+                  }
 
-          {
-            !isFetching && !!error &&
-              <div>
-                <Icon
-                  className={styles.warningIcon}
-                  title={errorMessage}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
+                  {
+                    !isFetching && !!error ?
+                      <div>
+                        <Icon
+                          className={styles.warningIcon}
+                          title={errorMessage}
+                          name={icons.WARNING}
+                          kind={kinds.WARNING}
+                        />
 
                 Search failed, please try again later.
+                      </div> :
+                      null
+                  }
+
+                  <div className={styles.dropdownArrowContainer}>
+                    <Icon
+                      name={icons.CARET_DOWN}
+                    />
+                  </div>
+                </Link>
               </div>
+            );
           }
+        }
+        renderElement={
+          (ref) => {
+            this._contentRef = ref;
 
-          <div className={styles.dropdownArrowContainer}>
-            <Icon
-              name={icons.CARET_DOWN}
-            />
-          </div>
-        </Link>
+            if (!this.state.isOpen) {
+              return;
+            }
 
-        {
-          this.state.isOpen &&
-            <div
-              ref={this._setContentRef}
-              className={styles.contentContainer}
-            >
-              <div className={styles.content}>
-                <div className={styles.searchContainer}>
-                  <div className={styles.searchIconContainer}>
-                    <Icon name={icons.SEARCH} />
+            return (
+              <div
+                ref={ref}
+                className={styles.contentContainer}
+              >
+                <div className={styles.content}>
+                  <div className={styles.searchContainer}>
+                    <div className={styles.searchIconContainer}>
+                      <Icon name={icons.SEARCH} />
+                    </div>
+
+                    <TextInput
+                      className={styles.searchInput}
+                      name={`${name}_textInput`}
+                      value={this.state.term}
+                      onChange={this.onSearchInputChange}
+                    />
+
+                    <FormInputButton
+                      kind={kinds.DEFAULT}
+                      spinnerIcon={icons.REFRESH}
+                      canSpin={true}
+                      isSpinning={isFetching}
+                      onPress={this.onRefreshPress}
+                    >
+                      <Icon name={icons.REFRESH} />
+                    </FormInputButton>
                   </div>
 
-                  <TextInput
-                    className={styles.searchInput}
-                    name={`${name}_textInput`}
-                    value={this.state.term}
-                    onChange={this.onSearchInputChange}
-                  />
-
-                  <FormInputButton
-                    kind={kinds.DEFAULT}
-                    spinnerIcon={icons.REFRESH}
-                    canSpin={true}
-                    isSpinning={isFetching}
-                    onPress={this.onRefreshPress}
-                  >
-                    <Icon name={icons.REFRESH} />
-                  </FormInputButton>
-                </div>
-
-                <div className={styles.results}>
-                  {
-                    items.map((item) => {
-                      return (
-                        <ImportSeriesSearchResultConnector
-                          key={item.tvdbId}
-                          tvdbId={item.tvdbId}
-                          title={item.title}
-                          year={item.year}
-                          network={item.network}
-                          onPress={this.onSeriesSelect}
-                        />
-                      );
-                    })
-                  }
+                  <div className={styles.results}>
+                    {
+                      items.map((item) => {
+                        return (
+                          <ImportSeriesSearchResultConnector
+                            key={item.tvdbId}
+                            tvdbId={item.tvdbId}
+                            title={item.title}
+                            year={item.year}
+                            network={item.network}
+                            onPress={this.onSeriesSelect}
+                          />
+                        );
+                      })
+                    }
+                  </div>
                 </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 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>
+      />
     );
   }
 }

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:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-1.0.1.tgz#6e5173764d4f9b8bef6d1b20ff51972909674942"
-  integrity sha512-OsgGk2hmsIpnpMl1Uq9aYKopG4V7bDuz2msNYPaRosF0CBbpa1YVF9P1qJ8MRsf1Zj/oK/I2uH++S+ffqxL98A==
+react-tether@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-2.0.0.tgz#84928b9636f1fe0a6874d1e450e7822e87f8cb07"
+  integrity sha512-iJnqTQV42Pf7w4xrg3g1gxSxbBCXleDt8AzlSoAqRINqB+mhcJUeegpB8SFMJ/nKT7lSfMkx3GvUfYY+9sPBGw==
   dependencies:
-    prop-types "^15.5.8"
-    tether "^1.4.3"
+    prop-types "^15.6.2"
+    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==