From 504460438f58be0bfb35778430eab2ed0af391ee Mon Sep 17 00:00:00 2001
From: DarkSky <25152247+darkskygit@users.noreply.github.com>
Date: Sun, 28 Dec 2025 17:16:20 +0800
Subject: [PATCH] fix: mobile mult-select tag delete (#14172)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #14167

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## New Features
* Added Backspace key support to delete the last selected tag when the
input field is empty
* Added delete icon buttons next to each tag for quick removal
* Features available on both mobile and desktop tag pickers

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../core/component/tags/multi-tag-select.ts   | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
index 0b30903b7..06fd71859 100644
--- a/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
+++ b/blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
@@ -484,6 +484,18 @@ const popMobileTagSelect = (target: PopupTarget, ops: TagSelectOptions) => {
   const onInput = (e: InputEvent) => {
     tagManager.text$.value = (e.target as HTMLInputElement).value;
   };
+  const onKeydown = (e: KeyboardEvent) => {
+    e.stopPropagation();
+    const inputValue = (e.target as HTMLInputElement).value.trim();
+    if (e.key === 'Backspace' && inputValue === '') {
+      const values = tagManager.value$.value;
+      const lastId = values[values.length - 1];
+      if (lastId) {
+        e.preventDefault();
+        tagManager.deleteTag(lastId);
+      }
+    }
+  };
   return popMenu(target, {
     options: {
       onClose: () => {
@@ -511,11 +523,21 @@ const popMobileTagSelect = (target: PopupTarget, ops: TagSelectOptions) => {
                 });
                 return html` <div class="${tagContainerStyle}" style=${style}>
                   <div class="${tagTextStyle}">${option.value}</div>
+                  <div
+                    class="${tagDeleteIconStyle}"
+                    @click="${(e: MouseEvent) => {
+                      e.stopPropagation();
+                      tagManager.deleteTag(id);
+                    }}"
+                  >
+                    ${CloseIcon()}
+                  </div>
                 </div>`;
               })}
               <input
                 .value="${tagManager.text$.value}"
                 @input="${onInput}"
+                @keydown="${onKeydown}"
                 placeholder="Type here..."
                 type="text"
                 style="outline: none;border: none;flex:1;min-width: 10px"