Properly focus on inputs when they're shown

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

1 files changed, 10 insertions, 2 deletions

diff --git a/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue b/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue
index ca7cc6975..bad2e8931 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue
@@ -23,9 +23,11 @@
 	<div class="set-conversation-name">
 		<input
 			type="text"
-			autofocus
+			:value="value"
+			ref="conversationName"
+			v-observe-visibility="visibilityChanged"
 			class="conversation-name"
-			:placeholder="t('spreed', 'Choose a conversation name')"
+			:placeholder="t('spreed', 'Conversation name')"
 			@input="handleInput">
 	</div>
 </template>
@@ -45,6 +47,12 @@ export default {
 		handleInput(event) {
 			this.$emit('input', event.target.value)
 		},
+		visibilityChanged(isVisible) {
+			if (isVisible) {
+				// Focus the input field of the current componnent.
+				this.$refs.conversationName.focus()
+			}
+		}
 	},
 
 }