Replying returns focus to reply button (#98)

Fixes #42
This commit is contained in:
Nolan Lawson 2018-04-12 21:18:14 -07:00 committed by GitHub
parent a875386539
commit a82c44c21f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 42 additions and 5 deletions

View file

@ -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 || ''))

View file

@ -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 => {

View file

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

View file

@ -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: () => ({

21
tests/spec/111-focus.js Normal file
View file

@ -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})
})