diff --git a/web/app/components/input/__button/input__button.scss b/web/app/components/input/__button/input__button.scss index 6e0cb7bc..51911d15 100644 --- a/web/app/components/input/__button/input__button.scss +++ b/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; + } } diff --git a/web/app/components/input/__field/input__field.scss b/web/app/components/input/__field/input__field.scss index b71e6122..a801f542 100644 --- a/web/app/components/input/__field/input__field.scss +++ b/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; } diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index 5e001a99..c4a08be6 100644 --- a/web/app/components/input/input.jsx +++ b/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?