From ecb585c11b1f594440790e0fcde486dbed7016b1 Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sat, 26 Jun 2021 14:50:48 +0200
Subject: [PATCH] Closes #61

---
 src/editor/Editor.jsx                         |  3 ++-
 src/editor/widgets/Autocomplete.jsx           |  9 +++++++--
 src/editor/widgets/comment/CommentWidget.jsx  |  2 ++
 src/editor/widgets/comment/TextEntryField.jsx | 16 +++++++++++-----
 src/editor/widgets/tag/TagWidget.jsx          |  1 +
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 51e3113..c8bdd36 100644
--- a/src/editor/Editor.jsx
+++ b/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,
diff --git a/src/editor/widgets/Autocomplete.jsx b/src/editor/widgets/Autocomplete.jsx
index e97b113..08a9839 100644
--- a/src/editor/widgets/Autocomplete.jsx
+++ b/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 }) => {
diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx
index 5254bd0..ec3fb8a 100644
--- a/src/editor/widgets/comment/CommentWidget.jsx
+++ b/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...')}
diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx
index cbd5e46..444970d 100644
--- a/src/editor/widgets/comment/TextEntryField.jsx
+++ b/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...')}
diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index ecbc9fb..e429c90 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/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}