[PR #23774] feat: add select-none class to tag filter components to prevent text selection #30393

Closed
opened 2026-02-21 20:47:24 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/23774

State: closed
Merged: Yes


Fixes #23773

Summary

This PR adds the select-none CSS class to tag filter components to prevent unintended text selection when users click or double-click on filter tags. This improves the user experience by ensuring a more polished interaction with tag filter elements.

After thorough investigation, we found and fixed all tag filter components that display clickable text across the entire application.

Changes Made:

  • Added select-none class to plugin-page/filter-management/tag-filter.tsx (displays "All Tags" text)
  • Added select-none class to marketplace search-box/tags-filter.tsx trigger elements
  • Added select-none class to base/tag-management/filter.tsx (used by apps and datasets pages, displays "All Tags" placeholder)
  • Added select-none class to tools/labels/filter.tsx (displays "All Tags" placeholder)

Files Modified:

  • web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
  • web/app/components/plugins/marketplace/search-box/tags-filter.tsx
  • web/app/components/base/tag-management/filter.tsx
  • web/app/components/tools/labels/filter.tsx

Pages Affected:

  • Apps page (uses base/tag-management/filter.tsx)
  • Datasets page (uses base/tag-management/filter.tsx)
  • Plugins page (uses plugin-page/filter-management/tag-filter.tsx)
  • Plugin Marketplace page (uses marketplace/search-box/tags-filter.tsx)
  • Tools page (uses tools/labels/filter.tsx)

Screenshots

Before After
Text could be selected when clicking on tag filters Text selection is now prevented for better UX

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23774 **State:** closed **Merged:** Yes --- Fixes #23773 ## Summary This PR adds the `select-none` CSS class to tag filter components to prevent unintended text selection when users click or double-click on filter tags. This improves the user experience by ensuring a more polished interaction with tag filter elements. After thorough investigation, we found and fixed all tag filter components that display clickable text across the entire application. ### Changes Made: - Added `select-none` class to plugin-page/filter-management/tag-filter.tsx (displays "All Tags" text) - Added `select-none` class to marketplace search-box/tags-filter.tsx trigger elements - Added `select-none` class to base/tag-management/filter.tsx (used by apps and datasets pages, displays "All Tags" placeholder) - Added `select-none` class to tools/labels/filter.tsx (displays "All Tags" placeholder) ### Files Modified: - `web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx` - `web/app/components/plugins/marketplace/search-box/tags-filter.tsx` - `web/app/components/base/tag-management/filter.tsx` - `web/app/components/tools/labels/filter.tsx` ### Pages Affected: - Apps page (uses base/tag-management/filter.tsx) - Datasets page (uses base/tag-management/filter.tsx) - Plugins page (uses plugin-page/filter-management/tag-filter.tsx) - Plugin Marketplace page (uses marketplace/search-box/tags-filter.tsx) - Tools page (uses tools/labels/filter.tsx) ## Screenshots | Before | After | |--------|-------| | Text could be selected when clicking on tag filters | Text selection is now prevented for better UX | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos\!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:24 -05:00
yindo closed this issue 2026-02-21 20:47:24 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30393