Closes #61

src/editor/Editor.jsx

@@ -191,8 +191,9 @@ const Editor = props => {
       <div ref={element} className={dragged ? 'r6o-editor dragged' : 'r6o-editor'}>
         <div className="r6o-arrow" />
         <div className="r6o-editor-inner">
-          {widgets.map(widget => 
+          {widgets.map((widget, idx) => 
             React.cloneElement(widget, { 
+              focus: idx === 0,
               annotation : currentAnnotation,
               readOnly : props.readOnly,
               env: props.env,

src/editor/widgets/Autocomplete.jsx

@@ -14,8 +14,13 @@ export default class Autocomplete extends Component {
   }
 
   componentDidMount() {
-    if (this.props.initialValue && this.element.current)
-      this.element.current.querySelector('input').value = this.props.initialValue;
+    if (this.element.current) {
+      if (this.props.initialValue)
+        this.element.current.querySelector('input').value = this.props.initialValue;
+        
+      if (this.props.focus)
+        this.element.current.querySelector('input').focus();
+    }
   }
   
   onInputValueChange = ({ inputValue }) => {

src/editor/widgets/comment/CommentWidget.jsx

@@ -60,6 +60,7 @@ const getDraftReply = (existingDraft, isReply) => {
  * Renders a list of comment bodies, followed by a 'reply' field.
  */
 const CommentWidget = props => {
+
   // All comments
   const all = props.annotation ? 
     props.annotation.bodies.filter(body => isComment(body, props.purposeSelector)) : [];
@@ -103,6 +104,7 @@ const CommentWidget = props => {
       { !props.readOnly && props.annotation &&
         <div className="r6o-widget comment editable">
           <TextEntryField
+            focus={props.focus}
             content={draftReply.value}
             editable={true}
             placeholder={comments.length > 0 ? i18n.t('Add a reply...') : i18n.t('Add a comment...')}

src/editor/widgets/comment/TextEntryField.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import TextareaAutosize from 'react-autosize-textarea';
 import i18n from '../../../i18n';
 
@@ -7,21 +7,27 @@ import i18n from '../../../i18n';
  */
 export default class TextEntryField extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.element = createRef();
+  }
+
   // CTRL+Enter functions as Ok
   onKeyDown = evt => {
     if (evt.which === 13 && evt.ctrlKey)
       this.props.onSaveAndClose();
   }
 
-  // Focus on render
-  onRender = ref => {
-    // Note: we could use this to set automatic focus (but leave this out for now)
+  componentDidMount() {
+    if (this.props.focus && this.element.current)
+      this.element.current.focus();
   }
 
   render() {
     return (
       <TextareaAutosize
-        ref={this.onRender}
+        ref={this.element}
         className={this.props.editable ? 'r6o-editable-text r6o-nodrag' : 'r6o-editable-text'} 
         value={this.props.content}
         placeholder={this.props.placeholder || i18n.t('Add a comment...')}

src/editor/widgets/tag/TagWidget.jsx

@@ -82,6 +82,7 @@ const TagWidget = props => {
 
       {!props.readOnly &&
         <Autocomplete
+          focus={props.focus}
           placeholder={i18n.t('Add tag...')}
           initialValue={draftTag.value}
           onChange={onDraftChange}