From e298eee822f79621c6ff4d9322042a89fd1fdefe Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 12 Aug 2025 09:23:59 +0800
Subject: [PATCH] feat: add select-none class to tag filter components to
 prevent text selection (#23774)

---
 web/app/components/base/tag-management/filter.tsx           | 6 +++---
 .../plugins/marketplace/search-box/tags-filter.tsx          | 4 ++--
 .../plugins/plugin-page/filter-management/tag-filter.tsx    | 4 ++--
 web/app/components/tools/labels/filter.tsx                  | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 4cf01fdc2..36be04216 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -79,7 +79,7 @@ const TagFilter: FC<TagFilterProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2',
+            'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2',
             !open && !!value.length && 'shadow-xs',
             open && !!value.length && 'shadow-xs',
           )}>
@@ -123,7 +123,7 @@ const TagFilter: FC<TagFilterProps> = ({
               {filteredTagList.map(tag => (
                 <div
                   key={tag.id}
-                  className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
+                  className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
                   onClick={() => selectTag(tag)}
                 >
                   <div title={tag.name} className='grow truncate text-sm leading-5 text-text-tertiary'>{tag.name}</div>
@@ -139,7 +139,7 @@ const TagFilter: FC<TagFilterProps> = ({
             </div>
             <div className='border-t-[0.5px] border-divider-regular' />
             <div className='p-1'>
-              <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
+              <div className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
                 setShowTagManagementModal(true)
                 setOpen(false)
               }}>
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index 12b84490a..2e1f74bc8 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -54,7 +54,7 @@ const TagsFilter = ({
         onClick={() => setOpen(v => !v)}
       >
         <div className={cn(
-          'ml-0.5 mr-1.5 flex  items-center text-text-tertiary ',
+          'ml-0.5 mr-1.5 flex  select-none items-center text-text-tertiary',
           size === 'large' && 'h-8 py-1',
           size === 'small' && 'h-7 py-0.5 ',
           // selectedTagsLength && 'text-text-secondary',
@@ -80,7 +80,7 @@ const TagsFilter = ({
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+                  className='flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index f81f5e18d..0d467793d 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -48,7 +48,7 @@ const TagsFilter = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
+          'flex h-8 cursor-pointer select-none items-center rounded-lg bg-components-input-bg-normal px-2 py-1 text-text-tertiary hover:bg-state-base-hover-alt',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}>
@@ -99,7 +99,7 @@ const TagsFilter = ({
               filteredOptions.map(option => (
                 <div
                   key={option.name}
-                  className='flex h-7 cursor-pointer items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+                  className='flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
                   onClick={() => handleCheck(option.name)}
                 >
                   <Checkbox
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 78e350db5..debf3ea80 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -67,7 +67,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover',
+            'flex h-8 cursor-pointer select-none items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover',
             !open && !!value.length && 'shadow-xs',
             open && !!value.length && 'shadow-xs',
           )}>
@@ -111,7 +111,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
               {filteredLabelList.map(label => (
                 <div
                   key={label.name}
-                  className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
+                  className='flex cursor-pointer select-none items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
                   onClick={() => selectLabel(label)}
                 >
                   <div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div>