Focus message field after upload or share

After starting an upload or sharing a file in the conversation,
set the focus back to the message field.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

2 files changed, 18 insertions, 2 deletions

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index ca4ba11bf..fe0e728c8 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -102,6 +102,7 @@ import Quote from '../Quote'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import { EventBus } from '../../services/EventBus'
 import { shareFile } from '../../services/filesSharingServices'
 import { processFiles } from '../../utils/fileUpload'
 import { CONVERSATION } from '../../constants'
@@ -173,9 +174,21 @@ export default {
 
 	mounted() {
 		this.isCurrentConversationIsFirstInList()
+
+		EventBus.$on('uploadStart', this.handleUploadStart)
+	},
+
+	beforeDestroy() {
+		EventBus.$off('uploadStart', this.handleUploadStart)
 	},
 
 	methods: {
+		handleUploadStart() {
+			// refocus on upload start as the user might want to type again
+			// while the upload is running
+			this.$refs.advancedInput.focusInput()
+		},
+
 		contentEditableToParsed(contentEditable) {
 			const mentions = contentEditable.querySelectorAll('span[data-at-embedded]')
 			mentions.forEach(mention => {
@@ -270,6 +283,7 @@ export default {
 						throw new Error(t('files', 'Invalid path selected'))
 					}
 					shareFile(path, this.token)
+					this.$refs.advancedInput.focusInput()
 				})
 		},
 
@@ -292,11 +306,11 @@ export default {
 		 *
 		 * @param {File[] | FileList} files pasted files list
 		 */
-		handleFiles(files) {
+		async handleFiles(files) {
 			// Create a unique id for the upload operation
 			const uploadId = new Date().getTime()
 			// Uploads and shares the files
-			processFiles(files, this.token, uploadId)
+			await processFiles(files, this.token, uploadId)
 		},
 
 		/**
diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index ed6773d23..19d277323 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -210,6 +210,7 @@ const actions = {
 	 * @param {object} uploadId The unique uploadId
 	 */
 	async uploadFiles({ commit, dispatch, state, getters }, uploadId) {
+		EventBus.$emit('uploadStart')
 
 		// Tag the previously indexed files and add the temporary messages to the
 		// messages list
@@ -266,6 +267,7 @@ const actions = {
 				}
 			}
 		}
+		EventBus.$emit('uploadFinished')
 	},
 	/**
 	 * Set the folder to store new attachments in