From 456cdb2f541c53b49ba8208abc79c013d63f9c40 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Thu, 19 Dec 2019 15:05:49 +0200
Subject: [PATCH 1/2] Fix save button style in topic edit

---
 client/css/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/css/style.css b/client/css/style.css
index e10f2023..1e979a1f 100644
--- a/client/css/style.css
+++ b/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 {

From 60ca8850d94b9930c950f645413bcf96324bce6d Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Thu, 19 Dec 2019 15:06:33 +0200
Subject: [PATCH 2/2] Focus topic edit input by using $refs

---
 client/components/Chat.vue       | 20 +++++++++++++++-----
 client/js/helpers/contextMenu.js |  4 ----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index e7762842..603aed8b 100644
--- a/client/components/Chat.vue
+++ b/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;
diff --git a/client/js/helpers/contextMenu.js b/client/js/helpers/contextMenu.js
index a9818a0f..5c7d9066 100644
--- a/client/js/helpers/contextMenu.js
+++ b/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({