Replying returns focus to reply button (#98)

Fixes #42

routes/_actions/compose.js

@@ -22,7 +22,7 @@ export async function insertHandleForReply (statusId) {
 
 export async function postStatus (realm, text, inReplyToId, mediaIds,
                                   sensitive, spoilerText, visibility,
-                                  mediaDescriptions = []) {
+                                  mediaDescriptions = [], inReplyToUuid) {
   let instanceName = store.get('currentInstance')
   let accessToken = store.get('accessToken')
   let online = store.get('online')
@@ -43,7 +43,7 @@ export async function postStatus (realm, text, inReplyToId, mediaIds,
       inReplyToId, mediaIds, sensitive, spoilerText, visibility)
     addStatusOrNotification(instanceName, 'home', status)
     store.clearComposeData(realm)
-    emit('postedStatus', realm)
+    emit('postedStatus', realm, inReplyToUuid)
   } catch (e) {
     console.error(e)
     toast.say('Unable to post status: ' + (e.message || ''))

routes/_components/compose/ComposeBox.html

@@ -215,6 +215,7 @@
         let inReplyTo = (realm === 'home' || realm === 'dialog') ? null : realm
         let overLimit = this.get('overLimit')
         let mediaDescriptions = this.get('mediaDescriptions')
+        let inReplyToUuid = this.get('inReplyToUuid')
 
         if (!text || overLimit) {
           return // do nothing if invalid
@@ -222,7 +223,8 @@
 
         /* no await */
         postStatus(realm, text, inReplyTo, mediaIds,
-          sensitive, contentWarning, postPrivacyKey, mediaDescriptions)
+          sensitive, contentWarning, postPrivacyKey,
+          mediaDescriptions, inReplyToUuid)
       },
       setupStickyObserver() {
         this.__stickyObserver = new IntersectionObserver(entries => {

routes/_components/status/Status.html

@@ -5,7 +5,7 @@
          aria-posinset="{{index}}"
          aria-setsize="{{length}}"
          aria-label="{{ariaLabel}}"
-         on:recalculateHeight >
+         on:recalculateHeight>
   {{#if showHeader}}
     <StatusHeader :notification :notificationId :status :statusId :timelineType
                   :account :accountId :uuid :isStatusInNotification />

routes/_components/status/StatusComposeBox.html

@@ -6,6 +6,7 @@
               isReply="true"
               replyVisibility="{{visibility}}"
               replySpoiler="{{spoilerText}}"
+              inReplyToUuid="{{uuid}}"
   />
 </div>
 <style>

routes/_components/status/StatusToolbar.html

@@ -1,5 +1,6 @@
-<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
+<div class="status-toolbar {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}" ref:node>
   <IconButton
+    className="status-toolbar-reply-button"
     label="{{replyLabel}}"
     pressable="true"
     pressed="{{replyShown}}"
@@ -49,6 +50,7 @@
   import { importDialogs } from '../../_utils/asyncModules'
   import { updateProfileAndRelationship } from '../../_actions/accounts'
   import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
+  import { on } from '../../_utils/eventBus'
 
   export default {
     oncreate() {
@@ -56,6 +58,7 @@
       registerClickDelegate(this.get('reblogKey'), (e) => this.onReblogClick(e))
       registerClickDelegate(this.get('replyKey'), (e) => this.onReplyClick(e))
       registerClickDelegate(this.get('optionsKey'), (e) => this.onOptionsClick(e))
+      on('postedStatus', this, this.onPostedStatus)
     },
     ondestroy() {
       unregisterClickDelegate(this.get('favoriteKey'))
@@ -104,6 +107,16 @@
         let dialogs = await importDialogs()
         await updateRelationshipPromise
         dialogs.showStatusOptionsDialog(originalStatusId)
+      },
+      onPostedStatus(realm, inReplyToUuid) {
+        if (realm !== this.get('originalStatusId') ||
+            inReplyToUuid !== this.get('uuid')) {
+          return
+        }
+        try {
+          // return status to the reply button after posting a reply
+          this.refs.node.querySelector('.status-toolbar-reply-button').focus()
+        } catch (e) { /* ignore */ }
       }
     },
     data: () => ({

tests/spec/111-focus.js

@@ -0,0 +1,21 @@
+import {
+  composeInput, getActiveElementClass,
+  getNthComposeReplyButton,
+  getNthComposeReplyInput, getNthReplyButton,
+  getNthStatus
+} from '../utils'
+import { foobarRole } from '../roles'
+
+fixture`111-focus.js`
+  .page`http://localhost:4002`
+
+test('replying to a toot returns focus to reply button', async t => {
+  await t.useRole(foobarRole)
+    .typeText(composeInput, 'I would like, if I may, to take you on a strange journey', {paste: true})
+    .pressKey('ctrl+enter')
+    .expect(getNthStatus(0).find('.status-content').innerText).contains('I would like, if I may, to take you on a strange journey')
+    .click(getNthReplyButton(0))
+    .typeText(getNthComposeReplyInput(0), 'How strange was it?', {paste: true})
+    .click(getNthComposeReplyButton(0))
+    .expect(getActiveElementClass()).contains('status-toolbar-reply-button', {timeout: 20000})
+})