Restored Opt<T> and made a new FieldValue<T> type to replace old Opt<T>

1 files changed, 6 insertions, 3 deletions

diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
index 5f8d6ebcd..357c97af2 100644
--- a/src/views/EditableView.tsx
+++ b/src/views/EditableView.tsx
@@ -1,6 +1,6 @@
 import React = require('react')
 import { observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 
 export interface EditableProps {
     GetValue(): string;
@@ -13,21 +13,24 @@ export class EditableView extends React.Component<EditableProps> {
     @observable
     editing: boolean = false;
 
+    @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key == "Enter" && !e.ctrlKey) {
             this.props.SetValue(e.currentTarget.value);
             this.editing = false;
+        } else if (e.key == "Escape") {
+            this.editing = false;
         }
     }
 
     render() {
         if (this.editing) {
-            return <input value={this.props.GetValue()} onKeyDown={this.onKeyDown}></input>
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}></input>
         } else {
             return (
                 <div>
                     {this.props.contents}
-                    <button onClick={() => this.editing = true}>Edit</button>
+                    <button onClick={action(() => this.editing = true)}>Edit</button>
                 </div>
             )
         }