Merge pull request #573 from ibi-group/fix-trip-pattern-name

Fix pattern name editor bug

Author: landonreed

lib/common/components/EditableTextField.js

@@ -47,13 +47,22 @@ export default class EditableTextField extends Component<Props, State> {
   }
 
   componentWillReceiveProps (nextProps: Props) {
-    if (this.state.value !== nextProps.value) {
-      // Update value if externally changed.
-      this.setState({ value: nextProps.value })
+    const {initialValue, isEditing, value} = this.state
+    const {value: nextValue} = nextProps
+    const valueChanged = this.props.value !== nextValue
+    if (value !== nextValue && valueChanged && !isEditing) {
+      // Update value if externally changed, but only if the field is not being
+      // actively edited. This update accounts for cases where the value this
+      // field represents has been updated (perhaps due to a request to the
+      // server), but if the user is already editing the field, we don't want to
+      // interrupt that input.
+      this.setState({ value: nextValue })
     }
-    if (this.state.initialValue !== nextProps.value) {
+    if (initialValue !== nextValue) {
       // Update initial value if externally changed.
-      this.setState({ initialValue: nextProps.value })
+      // TODO: investigate whether this conditional case fully accounts for the
+      // above conditional.
+      this.setState({ initialValue: nextValue })
     }
   }
 
@@ -141,6 +150,8 @@ export default class EditableTextField extends Component<Props, State> {
             <FormGroup data-test-id='editable-text-field-edit-container'>
               <InputGroup>
                 <FormControl
+                  /* eslint-disable-next-line jsx-a11y/no-autofocus */
+                  autoFocus
                   type={type.toLowerCase()}
                   min={min}
                   step={step}