2 files changed, 8 insertions, 1 deletions
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index b62c36e..6972f93 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -22,6 +22,12 @@ class AnnotationForm extends Component {
     this.handleSelect = this.handleSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.textareaRef = React.createRef()
+  }
+  componentDidMount() {
+    if (this.textareaRef && this.textareaRef.current) {
+      this.textareaRef.current.focus()
+    }
   }
   handleKeyDown(e) {
     if (e.keyCode === 27) { // escape
@@ -111,6 +117,7 @@ class AnnotationForm extends Component {
           value={annotation.text}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
+          ref={this.textareaRef}
         />
       </div>
     )
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js
index 7b562c2..09cb255 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -38,7 +38,7 @@ class AnnotationIndex extends Component {
     const items = order.filter(id => {
       const { start_ts: ts } = lookup[id]
       return (timeMin < ts && ts < timeMax)
-    }).map(id => lookup[id])
+    }).map(id => lookup[id]).reverse()
     this.setState({ items })
   }
   handleClick(annotation) {