Skip to content

feat(web-awesome): add search to Tags filter dropdown - #840

Merged
epszaw merged 2 commits into
allure-framework:mainfrom
MJayyusi:feat/awesome-tags-dropdown-search
Sep 29, 2026
Merged

epszaw merged 2 commits into
allure-framework:mainfrom
MJayyusi:feat/awesome-tags-dropdown-search

Conversation

@MJayyusi

@MJayyusi MJayyusi commented Jul 31, 2026 •

Copy link
Copy Markdown

Context

The Awesome Tags dropdown lists every tag with no search field, which is impractical when a report has hundreds or thousands of requirement tags (e.g. REQ-1235).

This adds a case-insensitive partial-match search field at the top of the Tags dropdown so reviewers can find tags quickly. Existing multi-select, filtering, and URL persistence are unchanged.

Fixes #839

Checklist

@MJayyusi

Copy link
Copy Markdown
Author

First contribution — please approve workflows when you have a moment.

@MJayyusi

Copy link
Copy Markdown
Author

@epszaw Can you please take a look or direct me on whats needed to get this one merged, this should be a simple one.
Thank you
MJ

@epszaw
epszaw requested a review from vdvukhzhilov September 11, 2026 09:23
@todti

todti commented Sep 14, 2026

Copy link
Copy Markdown
Collaborator

Thanks for the contribution, and sorry for the slow response here.

The approach looks right — reusing SearchBox and gating it behind a searchable prop on ArrayFieldFilter keeps the change small and leaves the other filters untouched. A few things before this can go in:

1. Search query isn't reset when the dropdown closes

search lives in ArrayFieldFilter, which stays mounted — only the Menu children unmount. So after typing REQ-12 and closing the dropdown, reopening it still shows the filtered subset (and the same applies after the filter's Clear button). Worth resetting the query when the menu closes, and inside onClear.

2. changeDebounce={0}

This overrides the 300ms default, so every keystroke re-renders the whole option list synchronously. The list isn't virtualized, so on the thousands-of-tags reports this PR targets that's noticeable input lag. I'd just drop the prop and keep the default.

3. Empty state

When nothing matches, Menu.Section renders an empty <ul> — a blank dropdown that reads as broken. A short "nothing found" row would help.

4. Dead stopPropagation

The onClick/onMouseDown handlers on the search wrapper aren't needed: Menu only closes on clicks whose target is outside menuRef, and this div is inside the portal subtree (Menu/index.tsx, the handleClickOutside guard). They also swallow the click for every other document-level listener, so better removed.

5. Rebase

The branch conflicts with main — it's trivial, both sides appended a block at the end of ReportFilters/styles.scss. ArrayFieldFilter also picked up new consumers in the meantime (Severity, Resolution filters), worth a quick check that they still render as before.

A unit test covering the filtering (match, no-match, reset on close) would be good to have too.

@MJayyusi
MJayyusi force-pushed the feat/awesome-tags-dropdown-search branch 2 times, most recently from 301bf5b to 7c1f117 Compare September 19, 2026 03:56
@MJayyusi

Copy link
Copy Markdown
Author

@todti
Thanks for the review - addressed in the latest push:

  1. Search resets when the dropdown closes and when Clear is used
  2. Dropped changeDebounce={0} (keeps the default debounce)
  3. Added a “No results” empty state for non-matching search
  4. Removed the unnecessary stopPropagation handlers
  5. Rebased onto latest main (styles conflict resolved). Severity/Resolution still use MultipleChoiceFieldFilter and are unchanged
  6. Added unit tests for match, no-match empty state, and reset on close

Ready for another look when you have a moment.

@vdvukhzhilov vdvukhzhilov left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks!

Make large tag lists usable by letting reviewers filter tags with a case-insensitive partial match without changing selection or URL behavior.
Add focused coverage for partial match, empty state, and search reset when the dropdown closes.
@vdvukhzhilov
vdvukhzhilov force-pushed the feat/awesome-tags-dropdown-search branch from 7c1f117 to f694e35 Compare September 21, 2026 13:34
@epszaw
epszaw merged commit bc4bb02 into allure-framework:main Sep 29, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add text search to the Awesome report Tags dropdown

4 participants