New: Loads of Backend Updates to Clients and Indexers

2025-09-17 17:14:18 +02:00 · 2019-06-13 23:54:25 -04:00
parent c48838e5b6
commit 8a9e2dc90d
345 changed files with 5859 additions and 2669 deletions
--- a/frontend/src/Components/Form/AutoCompleteInput.js
+++ b/frontend/src/Components/Form/AutoCompleteInput.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Autosuggest from 'react-autosuggest';
-import classNames from 'classnames';
 import jdu from 'jdu';
-import styles from './AutoCompleteInput.css';
+import AutoSuggestInput from './AutoSuggestInput';

 class AutoCompleteInput extends Component {

@@ -39,31 +37,6 @@ class AutoCompleteInput extends Component {
    });
  }

-  onInputKeyDown = (event) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const { suggestions } = this.state;
-
-    if (
-      event.key === 'Tab' &&
-      suggestions.length &&
-      suggestions[0] !== this.props.value
-    ) {
-      event.preventDefault();
-
-      if (value) {
-        onChange({
-          name,
-          value: suggestions[0]
-        });
-      }
-    }
-  }
-
  onInputBlur = () => {
    this.setState({ suggestions: [] });
  }
@@ -88,74 +61,37 @@ class AutoCompleteInput extends Component {

  render() {
    const {
-      className,
-      inputClassName,
      name,
      value,
-      placeholder,
-      hasError,
-      hasWarning
+      ...otherProps
    } = this.props;

    const { suggestions } = this.state;

-    const inputProps = {
-      className: classNames(
-        inputClassName,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
-      ),
-      name,
-      value,
-      placeholder,
-      autoComplete: 'off',
-      spellCheck: false,
-      onChange: this.onInputChange,
-      onKeyDown: this.onInputKeyDown,
-      onBlur: this.onInputBlur
-    };
-
-    const theme = {
-      container: styles.inputContainer,
-      containerOpen: styles.inputContainerOpen,
-      suggestionsContainer: styles.container,
-      suggestionsList: styles.list,
-      suggestion: styles.listItem,
-      suggestionHighlighted: styles.highlighted
-    };
-
    return (
-      <div className={className}>
-        <Autosuggest
-          id={name}
-          inputProps={inputProps}
-          theme={theme}
-          suggestions={suggestions}
-          getSuggestionValue={this.getSuggestionValue}
-          renderSuggestion={this.renderSuggestion}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        />
-      </div>
+      <AutoSuggestInput
+        {...otherProps}
+        name={name}
+        value={value}
+        suggestions={suggestions}
+        getSuggestionValue={this.getSuggestionValue}
+        renderSuggestion={this.renderSuggestion}
+        onInputBlur={this.onInputBlur}
+        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+      />
    );
  }
 }

 AutoCompleteInput.propTypes = {
-  className: PropTypes.string.isRequired,
-  inputClassName: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
  values: PropTypes.arrayOf(PropTypes.string).isRequired,
-  placeholder: PropTypes.string,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
  onChange: PropTypes.func.isRequired
 };

 AutoCompleteInput.defaultProps = {
-  className: styles.inputWrapper,
-  inputClassName: styles.input,
  value: ''
 };

--- a/frontend/src/Components/Form/AutoCompleteInput.css
+++ b/frontend/src/Components/Form/AutoCompleteInput.css
@@ -10,25 +10,20 @@
  composes: hasWarning from '~Components/Form/Input.css';
 }

-.inputWrapper {
-  display: flex;
-}
-
 .inputContainer {
-  position: relative;
  flex-grow: 1;
 }

-.container {
+.suggestionsContainer {
  @add-mixin scrollbar;
  @add-mixin scrollbarTrack;
  @add-mixin scrollbarThumb;
 }

-.inputContainerOpen {
-  .container {
-    position: absolute;
-    z-index: 1;
+.suggestionsContainerOpen {
+  z-index: $popperZIndex;
+
+  .suggestionsContainer {
    overflow-y: auto;
    max-height: 200px;
    width: 100%;
@@ -39,20 +34,16 @@
  }
 }

-.list {
+.suggestionsList {
  margin: 5px 0;
  padding-left: 0;
  list-style-type: none;
 }

-.listItem {
+.suggestion {
  padding: 0 16px;
 }

-.match {
-  font-weight: bold;
-}
-
-.highlighted {
+.suggestionHighlighted {
  background-color: $menuItemHoverBackgroundColor;
 }
--- a/frontend/src/Components/Form/AutoSuggestInput.js
+++ b/frontend/src/Components/Form/AutoSuggestInput.js
@@ -0,0 +1,257 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Autosuggest from 'react-autosuggest';
+import { Manager, Popper, Reference } from 'react-popper';
+import classNames from 'classnames';
+import Portal from 'Components/Portal';
+import styles from './AutoSuggestInput.css';
+
+class AutoSuggestInput extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._scheduleUpdate = null;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this._scheduleUpdate &&
+      prevProps.suggestions !== this.props.suggestions
+    ) {
+      this._scheduleUpdate();
+    }
+  }
+
+  //
+  // Control
+
+  renderInputComponent = (inputProps) => {
+    const { renderInputComponent } = this.props;
+
+    return (
+      <Reference>
+        {({ ref }) => {
+          if (renderInputComponent) {
+            return renderInputComponent(inputProps, ref);
+          }
+
+          return (
+            <div ref={ref}>
+              <input
+                {...inputProps}
+              />
+            </div>
+          );
+        }}
+      </Reference>
+    );
+  }
+
+  renderSuggestionsContainer = ({ containerProps, children }) => {
+    return (
+      <Portal>
+        <Popper
+          placement='bottom-start'
+          modifiers={{
+            computeMaxHeight: {
+              order: 851,
+              enabled: true,
+              fn: this.onComputeMaxHeight
+            },
+            flip: {
+              padding: this.props.minHeight
+            }
+          }}
+        >
+          {({ ref: popperRef, style, scheduleUpdate }) => {
+            this._scheduleUpdate = scheduleUpdate;
+
+            return (
+              <div
+                ref={popperRef}
+                style={style}
+                className={children ? styles.suggestionsContainerOpen : undefined}
+              >
+                <div
+                  {...containerProps}
+                  style={{
+                    maxHeight: style.maxHeight
+                  }}
+                >
+                  {children}
+                </div>
+              </div>
+            );
+          }}
+        </Popper>
+      </Portal>
+    );
+  }
+
+  //
+  // Listeners
+
+  onComputeMaxHeight = (data) => {
+    const {
+      top,
+      bottom,
+      width
+    } = data.offsets.reference;
+
+    const windowHeight = window.innerHeight;
+
+    if ((/^botton/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom;
+    } else {
+      data.styles.maxHeight = top;
+    }
+
+    data.styles.width = width;
+
+    return data;
+  }
+
+  onInputChange = (event, { newValue }) => {
+    this.props.onChange({
+      name: this.props.name,
+      value: newValue
+    });
+  }
+
+  onInputKeyDown = (event) => {
+    const {
+      name,
+      value,
+      suggestions,
+      onChange
+    } = this.props;
+
+    if (
+      event.key === 'Tab' &&
+      suggestions.length &&
+      suggestions[0] !== this.props.value
+    ) {
+      event.preventDefault();
+
+      if (value) {
+        onChange({
+          name,
+          value: suggestions[0]
+        });
+      }
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      forwardedRef,
+      className,
+      inputContainerClassName,
+      name,
+      value,
+      placeholder,
+      suggestions,
+      hasError,
+      hasWarning,
+      getSuggestionValue,
+      renderSuggestion,
+      onInputChange,
+      onInputKeyDown,
+      onInputFocus,
+      onInputBlur,
+      onSuggestionsFetchRequested,
+      onSuggestionsClearRequested,
+      onSuggestionSelected,
+      ...otherProps
+    } = this.props;
+
+    const inputProps = {
+      className: classNames(
+        className,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning,
+      ),
+      name,
+      value,
+      placeholder,
+      autoComplete: 'off',
+      spellCheck: false,
+      onChange: onInputChange || this.onInputChange,
+      onKeyDown: onInputKeyDown || this.onInputKeyDown,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur
+    };
+
+    const theme = {
+      container: inputContainerClassName,
+      containerOpen: styles.suggestionsContainerOpen,
+      suggestionsContainer: styles.suggestionsContainer,
+      suggestionsList: styles.suggestionsList,
+      suggestion: styles.suggestion,
+      suggestionHighlighted: styles.suggestionHighlighted
+    };
+
+    return (
+      <Manager>
+        <Autosuggest
+          {...otherProps}
+          ref={forwardedRef}
+          id={name}
+          inputProps={inputProps}
+          theme={theme}
+          suggestions={suggestions}
+          getSuggestionValue={getSuggestionValue}
+          renderInputComponent={this.renderInputComponent}
+          renderSuggestionsContainer={this.renderSuggestionsContainer}
+          renderSuggestion={renderSuggestion}
+          onSuggestionSelected={onSuggestionSelected}
+          onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={onSuggestionsClearRequested}
+        />
+      </Manager>
+    );
+  }
+}
+
+AutoSuggestInput.propTypes = {
+  forwardedRef: PropTypes.func,
+  className: PropTypes.string.isRequired,
+  inputContainerClassName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  placeholder: PropTypes.string,
+  suggestions: PropTypes.array.isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  enforceMaxHeight: PropTypes.bool.isRequired,
+  minHeight: PropTypes.number.isRequired,
+  maxHeight: PropTypes.number.isRequired,
+  getSuggestionValue: PropTypes.func.isRequired,
+  renderInputComponent: PropTypes.func,
+  renderSuggestion: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func,
+  onInputKeyDown: PropTypes.func,
+  onInputFocus: PropTypes.func,
+  onInputBlur: PropTypes.func.isRequired,
+  onSuggestionsFetchRequested: PropTypes.func.isRequired,
+  onSuggestionsClearRequested: PropTypes.func.isRequired,
+  onSuggestionSelected: PropTypes.func,
+  onChange: PropTypes.func.isRequired
+};
+
+AutoSuggestInput.defaultProps = {
+  className: styles.input,
+  inputContainerClassName: styles.inputContainer,
+  enforceMaxHeight: true,
+  minHeight: 50,
+  maxHeight: 200
+};
+
+export default AutoSuggestInput;
--- a/frontend/src/Components/Form/DeviceInput.css
+++ b/frontend/src/Components/Form/DeviceInput.css
@@ -2,7 +2,7 @@
  display: flex;
 }

-.inputContainer {
-  composes: inputContainer from '~./TagInput.css';
+.input {
+  composes: input from '~./TagInput.css';
  composes: hasButton from '~Components/Form/Input.css';
 }
--- a/frontend/src/Components/Form/DeviceInput.js
+++ b/frontend/src/Components/Form/DeviceInput.js
@@ -47,6 +47,7 @@ class DeviceInput extends Component {
  render() {
    const {
      className,
+      name,
      items,
      selectedDevices,
      hasError,
@@ -58,7 +59,8 @@ class DeviceInput extends Component {
    return (
      <div className={className}>
        <TagInput
-          className={styles.inputContainer}
+          inputContainerClassName={styles.input}
+          name={name}
          tags={selectedDevices}
          tagList={items}
          allowNew={true}
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -1,7 +1,3 @@
-.tether {
-  z-index: 2000;
-}
-
 .enhancedSelect {
  composes: input from '~Components/Form/Input.css';
  composes: link from '~Components/Link/Link.css';
@@ -44,10 +40,13 @@
 }

 .optionsContainer {
+  z-index: $popperZIndex;
  width: auto;
 }

 .options {
+  composes: scroller from '~Components/Scroller/Scroller.css';
+
  border: 1px solid $inputBorderColor;
  border-radius: 4px;
  background-color: $white;
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -1,13 +1,14 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import TetherComponent from 'react-tether';
+import { Manager, Popper, Reference } from 'react-popper';
 import classNames from 'classnames';
+import getUniqueElememtId from 'Utilities/getUniqueElementId';
 import isMobileUtil from 'Utilities/isMobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import { icons, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
+import Portal from 'Components/Portal';
 import Link from 'Components/Link/Link';
 import Measure from 'Components/Measure';
 import Modal from 'Components/Modal/Modal';
@@ -17,19 +18,6 @@ import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue
 import EnhancedSelectInputOption from './EnhancedSelectInputOption';
 import styles from './EnhancedSelectInput.css';

-const tetherOptions = {
-  skipMoveElement: true,
-  constraints: [
-    {
-      to: 'window',
-      attachment: 'together',
-      pin: true
-    }
-  ],
-  attachment: 'top left',
-  targetAttachment: 'bottom left'
-};
-
 function isArrowKey(keyCode) {
  return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -87,8 +75,9 @@ class EnhancedSelectInput extends Component {
  constructor(props, context) {
    super(props, context);

-    this._buttonRef = {};
-    this._optionsRef = {};
+    this._scheduleUpdate = null;
+    this._buttonId = getUniqueElememtId();
+    this._optionsId = getUniqueElememtId();

    this.state = {
      isOpen: false,
@@ -99,6 +88,10 @@ class EnhancedSelectInput extends Component {
  }

  componentDidUpdate(prevProps) {
+    if (this._scheduleUpdate) {
+      this._scheduleUpdate();
+    }
+
    if (prevProps.value !== this.props.value) {
      this.setState({
        selectedIndex: getSelectedIndex(this.props)
@@ -120,9 +113,26 @@ class EnhancedSelectInput extends Component {
  //
  // Listeners

+  onComputeMaxHeight = (data) => {
+    const {
+      top,
+      bottom
+    } = data.offsets.reference;
+
+    const windowHeight = window.innerHeight;
+
+    if ((/^botton/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom;
+    } else {
+      data.styles.maxHeight = top;
+    }
+
+    return data;
+  }
+
  onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef.current);
-    const options = ReactDOM.findDOMNode(this._optionsRef.current);
+    const button = document.getElementById(this._buttonId);
+    const options = document.getElementById(this._optionsId);

    if (!button || this.state.isMobile) {
      return;
@@ -266,96 +276,110 @@ class EnhancedSelectInput extends Component {

    return (
      <div>
-        <TetherComponent
-          classes={{
-            element: styles.tether
-          }}
-          {...tetherOptions}
-          renderTarget={
-            (ref) => {
-              this._buttonRef = ref;
-
-              return (
+        <Manager>
+          <Reference>
+            {({ ref }) => (
+              <div
+                ref={ref}
+                id={this._buttonId}
+              >
                <Measure
                  whitelist={['width']}
                  onMeasure={this.onMeasure}
                >
-                  <div ref={ref}>
-                    <Link
-                      className={classNames(
-                        className,
-                        hasError && styles.hasError,
-                        hasWarning && styles.hasWarning,
-                        isDisabled && disabledClassName
-                      )}
+                  <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}
-                      onBlur={this.onBlur}
-                      onKeyDown={this.onKeyDown}
-                      onPress={this.onPress}
                    >
-                      <SelectedValueComponent
-                        {...selectedValueOptions}
-                        {...selectedOption}
-                        isDisabled={isDisabled}
-                      >
-                        {selectedOption ? selectedOption.value : null}
-                      </SelectedValueComponent>
+                      {selectedOption ? selectedOption.value : null}
+                    </SelectedValueComponent>

-                      <div
-                        className={isDisabled ?
-                          styles.dropdownArrowContainerDisabled :
-                          styles.dropdownArrowContainer
-                        }
-                      >
-                        <Icon
-                          name={icons.CARET_DOWN}
-                        />
-                      </div>
-                    </Link>
-                  </div>
+                    <div
+                      className={isDisabled ?
+                        styles.dropdownArrowContainerDisabled :
+                        styles.dropdownArrowContainer
+                      }
+                    >
+                      <Icon
+                        name={icons.CARET_DOWN}
+                      />
+                    </div>
+                  </Link>
                </Measure>
-              );
-            }
-          }
-          renderElement={
-            (ref) => {
-              this._optionsRef = ref;
+              </div>
+            )}
+          </Reference>
+          <Portal>
+            <Popper
+              placement="bottom-start"
+              modifiers={{
+                computeMaxHeight: {
+                  order: 851,
+                  enabled: true,
+                  fn: this.onComputeMaxHeight
+                }
+              }}
+            >
+              {({ ref, style, scheduleUpdate }) => {
+                this._scheduleUpdate = scheduleUpdate;

-              if (!isOpen || isMobile) {
-                return;
-              }
-
-              return (
-                <div
-                  ref={ref}
-                  className={styles.optionsContainer}
-                  style={{
-                    minWidth: width
-                  }}
-                >
-                  <div className={styles.options}>
+                return (
+                  <div
+                    ref={ref}
+                    id={this._optionsId}
+                    className={styles.optionsContainer}
+                    style={{
+                      ...style,
+                      minWidth: width
+                    }}
+                  >
                    {
-                      values.map((v, index) => {
-                        return (
-                          <OptionComponent
-                            key={v.key}
-                            id={v.key}
-                            isSelected={index === selectedIndex}
-                            {...v}
-                            isMobile={false}
-                            onSelect={this.onSelect}
-                          >
-                            {v.value}
-                          </OptionComponent>
-                        );
-                      })
+                      isOpen && !isMobile ?
+                        <Scroller
+                          className={styles.options}
+                          style={{
+                            maxHeight: style.maxHeight
+                          }}
+                        >
+                          {
+                            values.map((v, index) => {
+                              return (
+                                <OptionComponent
+                                  key={v.key}
+                                  id={v.key}
+                                  isSelected={index === selectedIndex}
+                                  {...v}
+                                  isMobile={false}
+                                  onSelect={this.onSelect}
+                                >
+                                  {v.value}
+                                </OptionComponent>
+                              );
+                            })
+                          }
+                        </Scroller> :
+                        null
                    }
                  </div>
-                </div>
-              );
-            }
-          }
-        />
+                );
+              }
+              }
+            </Popper>
+          </Portal>
+        </Manager>

        {
          isMobile &&
--- a/frontend/src/Components/Form/PathInput.css
+++ b/frontend/src/Components/Form/PathInput.css
@@ -1,66 +1,16 @@
-.path {
-  composes: input from '~Components/Form/Input.css';
-}
-
-.hasError {
-  composes: hasError from '~Components/Form/Input.css';
-}
-
-.hasWarning {
-  composes: hasWarning from '~Components/Form/Input.css';
-}
-
 .hasFileBrowser {
+  composes: input from '~./AutoSuggestInput.css';
  composes: hasButton from '~Components/Form/Input.css';
 }

-.pathInputWrapper {
+.inputWrapper {
  display: flex;
 }

-.pathInputContainer {
-  position: relative;
-  flex-grow: 1;
-}
-
-.pathContainer {
-  @add-mixin scrollbar;
-  @add-mixin scrollbarTrack;
-  @add-mixin scrollbarThumb;
-}
-
-.pathInputContainerOpen {
-  .pathContainer {
-    position: absolute;
-    z-index: 1;
-    overflow-y: auto;
-    max-height: 200px;
-    width: 100%;
-    border: 1px solid $inputBorderColor;
-    border-radius: 4px;
-    background-color: $white;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
-  }
-}
-
-.pathList {
-  margin: 5px 0;
-  padding-left: 0;
-  list-style-type: none;
-}
-
-.pathListItem {
-  padding: 0 16px;
-}
-
 .pathMatch {
  font-weight: bold;
 }

-.pathHighlighted {
-  background-color: $menuItemHoverBackgroundColor;
-}
-
 .fileBrowserButton {
  composes: button from '~./FormInputButton.css';

--- a/frontend/src/Components/Form/PathInput.js
+++ b/frontend/src/Components/Form/PathInput.js
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Autosuggest from 'react-autosuggest';
-import classNames from 'classnames';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import AutoSuggestInput from './AutoSuggestInput';
 import FormInputButton from './FormInputButton';
 import styles from './PathInput.css';

@@ -16,6 +15,8 @@ class PathInput extends Component {
  constructor(props, context) {
    super(props, context);

+    this._node = document.getElementById('portal-root');
+
    this.state = {
      isFileBrowserModalOpen: false
    };
@@ -106,56 +107,30 @@ class PathInput extends Component {
  render() {
    const {
      className,
-      inputClassName,
      name,
      value,
-      placeholder,
      paths,
      includeFiles,
-      hasError,
-      hasWarning,
      hasFileBrowser,
-      onChange
+      onChange,
+      ...otherProps
    } = this.props;
-
-    const inputProps = {
-      className: classNames(
-        inputClassName,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
-        hasFileBrowser && styles.hasFileBrowser
-      ),
-      name,
-      value,
-      placeholder,
-      autoComplete: 'off',
-      spellCheck: false,
-      onChange: this.onInputChange,
-      onKeyDown: this.onInputKeyDown,
-      onBlur: this.onInputBlur
-    };
-
-    const theme = {
-      container: styles.pathInputContainer,
-      containerOpen: styles.pathInputContainerOpen,
-      suggestionsContainer: styles.pathContainer,
-      suggestionsList: styles.pathList,
-      suggestion: styles.pathListItem,
-      suggestionHighlighted: styles.pathHighlighted
-    };
-
    return (
      <div className={className}>
-        <Autosuggest
-          id={name}
-          inputProps={inputProps}
-          theme={theme}
+        <AutoSuggestInput
+          {...otherProps}
+          className={hasFileBrowser ? styles.hasFileBrowser : undefined}
+          name={name}
+          value={value}
          suggestions={paths}
          getSuggestionValue={this.getSuggestionValue}
          renderSuggestion={this.renderSuggestion}
+          onInputKeyDown={this.onInputKeyDown}
+          onInputBlur={this.onInputBlur}
          onSuggestionSelected={this.onSuggestionSelected}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          onChange={onChange}
        />

        {
@@ -185,14 +160,10 @@ class PathInput extends Component {

 PathInput.propTypes = {
  className: PropTypes.string.isRequired,
-  inputClassName: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
-  placeholder: PropTypes.string,
  paths: PropTypes.array.isRequired,
  includeFiles: PropTypes.bool.isRequired,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
  hasFileBrowser: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  onFetchPaths: PropTypes.func.isRequired,
@@ -200,8 +171,7 @@ PathInput.propTypes = {
 };

 PathInput.defaultProps = {
-  className: styles.pathInputWrapper,
-  inputClassName: styles.path,
+  className: styles.inputWrapper,
  value: '',
  hasFileBrowser: true
 };
--- a/frontend/src/Components/Form/TagInput.css
+++ b/frontend/src/Components/Form/TagInput.css
@@ -1,5 +1,5 @@
-.inputContainer {
-  composes: input from '~Components/Form/Input.css';
+.input {
+  composes: input from '~./AutoSuggestInput.css';

  position: relative;
  padding: 0;
@@ -13,20 +13,7 @@
  }
 }

-.hasError {
-  composes: hasError from '~Components/Form/Input.css';
-}
-
-.hasWarning {
-  composes: hasWarning from '~Components/Form/Input.css';
-}
-
-.tags {
-  flex: 0 0 auto;
-  max-width: 100%;
-}
-
-.input {
+.internalInput {
  flex: 1 1 0%;
  margin-left: 3px;
  min-width: 20%;
@@ -35,44 +22,3 @@
  height: 21px;
  border: none;
 }
-
-.suggestionsContainer {
-  @add-mixin scrollbar;
-  @add-mixin scrollbarTrack;
-  @add-mixin scrollbarThumb;
-}
-
-.containerOpen {
-  .suggestionsContainer {
-    position: absolute;
-    right: -1px;
-    left: -1px;
-    z-index: 1;
-    overflow-y: auto;
-    margin-top: 1px;
-    max-height: 110px;
-    border: 1px solid $inputBorderColor;
-    border-radius: 4px;
-    background-color: $white;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
-  }
-}
-
-.suggestionsList {
-  margin: 5px 0;
-  padding-left: 0;
-  list-style-type: none;
-}
-
-.suggestion {
-  padding: 0 16px;
-  cursor: default;
-
-  &:hover {
-    background-color: $menuItemHoverBackgroundColor;
-  }
-}
-
-.suggestionHighlighted {
-  background-color: $menuItemHoverBackgroundColor;
-}
--- a/frontend/src/Components/Form/TagInput.js
+++ b/frontend/src/Components/Form/TagInput.js
@@ -1,17 +1,17 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Autosuggest from 'react-autosuggest';
 import classNames from 'classnames';
 import { kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
+import AutoSuggestInput from './AutoSuggestInput';
 import TagInputInput from './TagInputInput';
 import TagInputTag from './TagInputTag';
 import styles from './TagInput.css';

 function getTag(value, selectedIndex, suggestions, allowNew) {
  if (selectedIndex == null && value) {
-    const existingTag = _.find(suggestions, { name: value });
+    const existingTag = suggestions.find((suggestion) => suggestion.name === value);

    if (existingTag) {
      return existingTag;
@@ -184,7 +184,7 @@ class TagInput extends Component {
  //
  // Render

-  renderInputComponent = (inputProps) => {
+  renderInputComponent = (inputProps, forwardedRef) => {
    const {
      tags,
      kind,
@@ -194,6 +194,7 @@ class TagInput extends Component {

    return (
      <TagInputInput
+        forwardedRef={forwardedRef}
        tags={tags}
        kind={kind}
        inputProps={inputProps}
@@ -208,10 +209,8 @@ class TagInput extends Component {
  render() {
    const {
      className,
-      inputClassName,
-      placeholder,
-      hasError,
-      hasWarning
+      inputContainerClassName,
+      ...otherProps
    } = this.props;

    const {
@@ -220,48 +219,30 @@ class TagInput extends Component {
      isFocused
    } = this.state;

-    const inputProps = {
-      className: inputClassName,
-      name,
-      value,
-      placeholder,
-      autoComplete: 'off',
-      spellCheck: false,
-      onChange: this.onInputChange,
-      onKeyDown: this.onInputKeyDown,
-      onFocus: this.onInputFocus,
-      onBlur: this.onInputBlur
-    };
-
-    const theme = {
-      container: classNames(
-        className,
-        isFocused && styles.isFocused,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
-      ),
-      containerOpen: styles.containerOpen,
-      suggestionsContainer: styles.suggestionsContainer,
-      suggestionsList: styles.suggestionsList,
-      suggestion: styles.suggestion,
-      suggestionHighlighted: styles.suggestionHighlighted
-    };
-
    return (
-      <Autosuggest
-        ref={this._setAutosuggestRef}
-        id={name}
-        inputProps={inputProps}
-        theme={theme}
+      <AutoSuggestInput
+        {...otherProps}
+        forwardedRef={this._setAutosuggestRef}
+        className={styles.internalInput}
+        inputContainerClassName={classNames(
+          inputContainerClassName,
+          isFocused && styles.isFocused,
+        )}
+        value={value}
        suggestions={suggestions}
        getSuggestionValue={this.getSuggestionValue}
        shouldRenderSuggestions={this.shouldRenderSuggestions}
        focusInputOnSuggestionClick={false}
        renderSuggestion={this.renderSuggestion}
        renderInputComponent={this.renderInputComponent}
+        onInputChange={this.onInputChange}
+        onInputKeyDown={this.onInputKeyDown}
+        onInputFocus={this.onInputFocus}
+        onInputBlur={this.onInputBlur}
        onSuggestionSelected={this.onSuggestionSelected}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+        onChange={this.onInputChange}
      />
    );
  }
@@ -269,7 +250,7 @@ class TagInput extends Component {

 TagInput.propTypes = {
  className: PropTypes.string.isRequired,
-  inputClassName: PropTypes.string.isRequired,
+  inputContainerClassName: PropTypes.string.isRequired,
  tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
  tagList: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
  allowNew: PropTypes.bool.isRequired,
@@ -285,8 +266,8 @@ TagInput.propTypes = {
 };

 TagInput.defaultProps = {
-  className: styles.inputContainer,
-  inputClassName: styles.input,
+  className: styles.internalInput,
+  inputContainerClassName: styles.input,
  allowNew: true,
  kind: kinds.INFO,
  placeholder: '',
--- a/frontend/src/Components/Form/TagInputInput.css
+++ b/frontend/src/Components/Form/TagInputInput.css
@@ -1,4 +1,9 @@
 .inputContainer {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
  display: flex;
  flex-wrap: wrap;
  padding: 6px 16px;
--- a/frontend/src/Components/Form/TagInputInput.js
+++ b/frontend/src/Components/Form/TagInputInput.js
@@ -23,6 +23,7 @@ class TagInputInput extends Component {

  render() {
    const {
+      forwardedRef,
      className,
      tags,
      inputProps,
@@ -33,6 +34,7 @@ class TagInputInput extends Component {

    return (
      <div
+        ref={forwardedRef}
        className={className}
        component="div"
        onMouseDown={this.onMouseDown}
@@ -59,6 +61,7 @@ class TagInputInput extends Component {
 }

 TagInputInput.propTypes = {
+  forwardedRef: PropTypes.func,
  className: PropTypes.string.isRequired,
  tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
  inputProps: PropTypes.object.isRequired,