New: Upstream Updates

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import classNames from 'classnames';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import isMobileUtil from 'Utilities/isMobile';
+import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import { icons, sizes, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';

frontend/src/Components/Form/PathInput.js

@@ -18,10 +18,19 @@ class PathInput extends Component {
     this._node = document.getElementById('portal-root');
 
     this.state = {
+      value: props.value,
       isFileBrowserModalOpen: false
     };
   }
 
+  componentDidUpdate(prevProps) {
+    const { value } = this.props;
+
+    if (prevProps.value !== value) {
+      this.setState({ value });
+    }
+  }
+
   //
   // Control
 
@@ -51,11 +60,8 @@ class PathInput extends Component {
   //
   // Listeners
 
-  onInputChange = (event, { newValue }) => {
-    this.props.onChange({
-      name: this.props.name,
-      value: newValue
-    });
+  onInputChange = ({ value }) => {
+    this.setState({ value });
   }
 
   onInputKeyDown = (event) => {
@@ -77,6 +83,11 @@ class PathInput extends Component {
   }
 
   onInputBlur = () => {
+    this.props.onChange({
+      name: this.props.name,
+      value: this.state.value
+    });
+
     this.props.onClearPaths();
   }
 
@@ -108,13 +119,18 @@ class PathInput extends Component {
     const {
       className,
       name,
-      value,
       paths,
       includeFiles,
       hasFileBrowser,
       onChange,
       ...otherProps
     } = this.props;
+
+    const {
+      value,
+      isFileBrowserModalOpen
+    } = this.state;
+
     return (
       <div className={className}>
         <AutoSuggestInput
@@ -130,7 +146,7 @@ class PathInput extends Component {
           onSuggestionSelected={this.onSuggestionSelected}
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onChange={onChange}
+          onChange={this.onInputChange}
         />
 
         {
@@ -144,7 +160,7 @@ class PathInput extends Component {
               </FormInputButton>
 
               <FileBrowserModal
-                isOpen={this.state.isFileBrowserModalOpen}
+                isOpen={isFileBrowserModalOpen}
                 name={name}
                 value={value}
                 includeFiles={includeFiles}

frontend/src/Components/Form/TagInput.css

@@ -14,7 +14,6 @@
 
 .internalInput {
   flex: 1 1 0%;
-  margin-top: -6px;
   margin-left: 3px;
   min-width: 20%;
   max-width: 100%;

frontend/src/Components/Form/TagInputInput.css

@@ -4,8 +4,9 @@
   bottom: -1px;
   left: -1px;
   display: flex;
+  align-items: start;
   flex-wrap: wrap;
-  padding: 6px 16px;
-  height: 33px;
+  padding: 1px 16px;
+  min-height: 33px;
   cursor: default;
 }

frontend/src/Components/Form/TagInputTag.css

@@ -0,0 +1,5 @@
+.tag {
+  composes: link from '~Components/Link/Link.css';
+
+  height: 31px;
+}

frontend/src/Components/Form/TagInputTag.js

@@ -4,6 +4,7 @@ import { kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import styles from './TagInputTag.css';
 
 class TagInputTag extends Component {
 
@@ -31,9 +32,9 @@ class TagInputTag extends Component {
       tag,
       kind
     } = this.props;
-
     return (
       <Link
+        className={styles.tag}
         tabIndex={-1}
         onPress={this.onDelete}
       >