0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-14 13:58:53 +08:00
discourse/app/assets/stylesheets/common/select-kit
Régis HANOL abb8e4c162
UX: Show disabled tags with explanations in composer tag search (#39072)
When users search for tags in the composer, certain tags are silently
excluded by backend filtering rules (one_per_topic groups, parent tag
requirements, category restrictions, synonyms). The user sees "No
matches found" with no explanation, making it appear as though the tag
doesn't exist.

This commit shows excluded tags as disabled rows in the autocomplete
dropdown with an inline explanation of why they can't be used. This
covers all exclusion reasons:

- One per topic: "Only one tag from the 'X' group is allowed per topic"

<img width="942" height="363" alt="2026-04-02 @ 12 31 34"
src="https://github.com/user-attachments/assets/1a181c7b-8ed2-4d6e-a22d-75ed6740db69"
/>

- Parent tag: "Requires the 'Y' tag to use tags from the 'X' group"

<img width="949" height="293" alt="2026-04-02 @ 12 32 55"
src="https://github.com/user-attachments/assets/3a6fe68d-66fd-4fe3-8d55-40342b0f8f0a"
/>

- Category restriction: "'tag' is restricted to the 'X' category"

<img width="783" height="321" alt="2026-04-02 @ 12 31 54"
src="https://github.com/user-attachments/assets/2f3601e2-d495-4906-8092-4a0bebcbbe52"
/>

- Synonyms: "This is a synonym for 'X'. Use 'X' instead."

<img width="807" height="326" alt="2026-04-02 @ 12 31 16"
src="https://github.com/user-attachments/assets/a26a89e0-5b96-49b1-9e62-e1bf41631e7a"
/>

The implementation extracts the tag search logic into a `Tags::Search`
service, queries for visible tags that match the search term but were
excluded from the allowed results, determines the exclusion reason for
each, and returns them as disabled items in the results array.

On the frontend, disabled rows are styled with reduced opacity on the
tag name and an italic reason line below. Click and keyboard selection
are blocked on disabled rows. The mini-tag-chooser now also passes
`excludeSynonyms` so synonyms appear as disabled rather than selectable.

A `guardian.can_see_tag?` check prevents leaking the existence of
staff-only tags, and hidden parent tag names are not exposed to users
who can't see them.

Ref - t/181010
2026-04-14 10:37:27 +02:00
..
_index.scss UX: create combined category and tag settings dropdown (#39099) 2026-04-06 10:09:33 -04:00
categories-admin-dropdown.scss
category-chooser.scss
category-drop.scss DEV: move mobile select-kit CSS to common files (#39055) 2026-04-02 13:46:06 -04:00
category-row.scss UX: ensure read-only only appears once, on the relevant category (#37492) 2026-02-03 15:03:04 -05:00
category-selector.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
color-palette-picker.scss FEATURE: Add previews to color palette selectors (#34129) 2025-08-11 11:51:01 +08:00
color-palettes.scss
combo-box.scss UX: make select-kit disabled state consistent with formkit (#37513) 2026-02-04 08:51:33 +01:00
composer-actions.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
dropdown-select-box.scss DEV: move mobile select-kit CSS to common files (#39055) 2026-04-02 13:46:06 -04:00
email-group-user-chooser.scss DEV: Update lint-configs and auto-fix issues (#31485) 2025-02-24 23:32:31 +01:00
flair-row.scss
future-date-input-selector.scss DEV: Introduce stylelint (#29852) 2025-01-20 15:27:42 +00:00
icon-picker.scss
list-setting.scss
mini-tag-chooser.scss
multi-select.scss UX: make select-kit disabled state consistent with formkit (#37513) 2026-02-04 08:51:33 +01:00
notifications-button.scss
notifications-filter.scss
period-chooser.scss UX: overrule borderadius on period-chooser (#38780) 2026-03-23 11:06:19 +01:00
select-kit.scss DEV: move mobile select-kit CSS to common files (#39055) 2026-04-02 13:46:06 -04:00
single-select.scss UX: Variable additions (#33473) 2025-07-09 18:53:01 -05:00
tag-category-admin-dropdown.scss UX: create combined category and tag settings dropdown (#39099) 2026-04-06 10:09:33 -04:00
tag-chooser.scss UX: Show disabled tags with explanations in composer tag search (#39072) 2026-04-14 10:37:27 +02:00
tag-drop.scss DEV: move mobile select-kit CSS to common files (#39055) 2026-04-02 13:46:06 -04:00
topic-chooser.scss
topic-notifications-button.scss DEV: replaces topic-notifications-options by DMenu (#30298) 2024-12-16 19:59:18 +01:00
user-row.scss