From 33a72f5c14c00671eedcee5d64a0edf5d6db3441 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8?= <luotianyi@luotianyi.me>
Date: Fri, 29 Nov 2024 17:55:21 +0800
Subject: [PATCH] fix(tags): wrong tag input width with CJK chars (#4127)

---
 .../src/common/components/TagSelectionModal.tsx   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/extensions/tags/js/src/common/components/TagSelectionModal.tsx b/extensions/tags/js/src/common/components/TagSelectionModal.tsx
index 7b9366f7b..1f67f788c 100644
--- a/extensions/tags/js/src/common/components/TagSelectionModal.tsx
+++ b/extensions/tags/js/src/common/components/TagSelectionModal.tsx
@@ -135,6 +135,14 @@ export default class TagSelectionModal<
     return this.attrs.title;
   }
 
+  lengthWithCJK(text: string) {
+    let length = 0;
+    for (const char of text) {
+      length += /[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF]/.test(char) ? 2 : 1;
+    }
+    return length;
+  }
+
   content() {
     if (this.loading || !this.tags) {
       return <LoadingIndicator />;
@@ -145,7 +153,12 @@ export default class TagSelectionModal<
     const secondaryCount = this.secondaryCount();
     const tags = this.getFilteredTags();
 
-    const inputWidth = Math.max(extractText(this.getInstruction(primaryCount, secondaryCount)).length, this.filter().length);
+    // 1 CJK character's width equals to 2ch,
+    // so we count 1 CJK character as 2 characters.
+    const inputWidth = Math.max(
+      this.lengthWithCJK(extractText(this.getInstruction(primaryCount, secondaryCount))),
+      this.lengthWithCJK(this.filter())
+    );
 
     return [
       <div className="Modal-body">