input: add autofocus and reset value after sending

web/app/components/input/__button/input__button.scss

@@ -3,9 +3,9 @@
 .input__button {
   display: none;
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
+  top: 0;
+  right: 0;
+  bottom: 0;
   box-sizing: border-box;
   width: $buttonWidth;
   padding: 0 10px;
@@ -19,4 +19,8 @@
   &:hover {
     background: #06c5c5;
   }
+
+  &:focus {
+    outline: none;
+  }
 }

web/app/components/input/__field/input__field.scss

@@ -14,13 +14,13 @@
   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
   font-size: $fontSize;
   line-height: $lineHeight;
-  box-shadow: 0 0 0 1px #eee;
+  box-shadow: inset 0 0 0 1px #eee;
   border: 0;
   border-radius: $borderRadius;
   resize: none;
 
   &:focus {
-    box-shadow: 0 0 0 1px #06c5c5;
+    box-shadow: inset 0 0 0 1px #06c5c5;
     outline: none;
   }
 

web/app/components/input/input.jsx

@@ -10,6 +10,12 @@ export default class Input extends Component {
     this.send = this.send.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.fieldNode.focus();
+    }
+  }
+
   autoResize() {
     this.fieldNode.style.height = '';
     this.setState({ height: this.fieldNode.scrollHeight });
@@ -17,14 +23,17 @@ export default class Input extends Component {
 
   send(e) {
     const text = this.fieldNode.value;
+    const pid = this.props.pid;
 
     e.preventDefault();
-    api.send({ text })
+    api.send({ text, ...(pid ? { pid } : {}) })
       .then(({ id }) => {
         // TODO: maybe we should run onsubmit before send; like in optimistic ui
         if (this.props.onSubmit) {
-          this.props.onSubmit({ text, id });
+          this.props.onSubmit({ text, id, pid });
         }
+
+        this.fieldNode.value = '';
       })
       .catch(() => {
         // TODO: do smth?