diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index 59b8d34850..352b9b035a 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -16,10 +16,14 @@ export class Autocomplete {
 	private opening: boolean;
 
 	private get text(): string {
-		return this.textRef.value;
+		// Use raw .value to get the latest value
+		// (Because v-model does not update while composition)
+		return this.textarea.value;
 	}
 
 	private set text(text: string) {
+		// Use ref value to notify other watchers
+		// (Because .value setter never fires input/change events)
 		this.textRef.value = text;
 	}
 
@@ -64,7 +68,7 @@ export class Autocomplete {
 	 */
 	private onInput() {
 		const caretPos = this.textarea.selectionStart;
-		const text = this.text.substr(0, caretPos).split("\n").pop()!;
+		const text = this.text.substring(0, caretPos).split("\n").pop()!;
 
 		const mentionIndex = text.lastIndexOf("@");
 		const hashtagIndex = text.lastIndexOf("#");
@@ -87,7 +91,7 @@ export class Autocomplete {
 		let opened = false;
 
 		if (isMention) {
-			const username = text.substr(mentionIndex + 1);
+			const username = text.substring(mentionIndex + 1);
 			if (username !== "" && username.match(/^[a-zA-Z0-9_]+$/)) {
 				this.open("user", username);
 				opened = true;
@@ -98,7 +102,7 @@ export class Autocomplete {
 		}
 
 		if (isHashtag && !opened) {
-			const hashtag = text.substr(hashtagIndex + 1);
+			const hashtag = text.substring(hashtagIndex + 1);
 			if (!hashtag.includes(" ")) {
 				this.open("hashtag", hashtag);
 				opened = true;
@@ -106,7 +110,7 @@ export class Autocomplete {
 		}
 
 		if (isEmoji && !opened) {
-			const emoji = text.substr(emojiIndex + 1);
+			const emoji = text.substring(emojiIndex + 1);
 			if (!emoji.includes(" ")) {
 				this.open("emoji", emoji);
 				opened = true;
@@ -114,7 +118,7 @@ export class Autocomplete {
 		}
 
 		if (isMfmTag && !opened) {
-			const mfmTag = text.substr(mfmTagIndex + 1);
+			const mfmTag = text.substring(mfmTagIndex + 1);
 			if (!mfmTag.includes(" ")) {
 				this.open("mfmTag", mfmTag.replace("[", ""));
 				opened = true;
@@ -211,9 +215,9 @@ export class Autocomplete {
 		if (type === "user") {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf("@"));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			const acct =
 				value.host === null
@@ -232,9 +236,9 @@ export class Autocomplete {
 		} else if (type === "hashtag") {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf("#"));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = `${trimmedBefore}#${value} ${after}`;
@@ -248,9 +252,9 @@ export class Autocomplete {
 		} else if (type === "emoji") {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf(":"));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = trimmedBefore + value + after;
@@ -264,9 +268,9 @@ export class Autocomplete {
 		} else if (type === "mfmTag") {
 			const source = this.text;
 
-			const before = source.substr(0, caret);
+			const before = source.substring(0, caret);
 			const trimmedBefore = before.substring(0, before.lastIndexOf("$"));
-			const after = source.substr(caret);
+			const after = source.substring(caret);
 
 			// 挿入
 			this.text = `${trimmedBefore}$[${value} ]${after}`;
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 6d24f5ad79..0b38d94c0d 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -48,7 +48,8 @@ html {
 	overflow-x: clip;
 
 	&.useCJKFont {
-		font-family: "Hiragino Maru Gothic Pro", "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+		font-family: "Hiragino Maru Gothic Pro", "BIZ UDGothic", Roboto,
+			HelveticaNeue, Arial, sans-serif;
 	}
 
 	&.useSystemFont {