Merge pull request #3609 from thelounge/xpaw/topic-edit

Remove querySelector in topic edit, fix save button style

client/components/Chat.vue

@@ -20,6 +20,7 @@
 					<span class="title">{{ channel.name }}</span>
 					<div v-if="channel.editTopic === true" class="topic-container">
 						<input
+							ref="topicInput"
 							:value="channel.topic"
 							class="topic-input"
 							placeholder="Set channel topic"
@@ -138,9 +139,22 @@ export default {
 		channel() {
 			this.channelChanged();
 		},
+		"channel.editTopic"(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					this.$refs.topicInput.focus();
+				});
+			}
+		},
 	},
 	mounted() {
 		this.channelChanged();
+
+		if (this.channel.editTopic) {
+			this.$nextTick(() => {
+				this.$refs.topicInput.focus();
+			});
+		}
 	},
 	methods: {
 		channelChanged() {
@@ -164,15 +178,11 @@ export default {
 		editTopic() {
 			if (this.channel.type === "channel") {
 				this.channel.editTopic = true;
-
-				this.$nextTick(() => {
-					document.querySelector(`#chan-${this.channel.id} .topic-input`).focus();
-				});
 			}
 		},
 		saveTopic() {
 			this.channel.editTopic = false;
-			const newTopic = document.querySelector(`#chan-${this.channel.id} .topic-input`).value;
+			const newTopic = this.$refs.topicInput.value;
 
 			if (this.channel.topic !== newTopic) {
 				const target = this.channel.id;

client/css/style.css

@@ -1039,6 +1039,7 @@ textarea.input {
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
+	appearance: none;
 }
 
 .topic-container .save-topic span:hover {

client/js/helpers/contextMenu.js

@@ -98,10 +98,6 @@ export function generateChannelContextMenu($root, channel, network) {
 			action() {
 				channel.editTopic = true;
 				$root.switchToChannel(channel);
-
-				$root.$nextTick(() =>
-					document.querySelector(`#chan-${channel.id} .topic-input`).focus()
-				);
 			},
 		});
 		items.push({