Skip to content

Improve search and filter behavior for edge cases on the Menu page #581

Description

@siribeesu

Summary

The Menu page supports searching and filtering dishes, but edge-case behavior (no results, combined filters, reset flow, etc.) can be improved. Handling these scenarios clearly makes browsing items smoother and reduces confusion when users type unusual queries or apply multiple filters.

Problem

  • When a search or filter returns no matching items, the page may look empty without a clear explanation.
  • Combined filters (e.g., category + search text) might be confusing if the UI does not clearly show what is active.
  • Resetting search and filters may not be obvious or might require manual clearing.
  • Users can type partial names, different casing, or extra spaces, and may not understand why results disappear.

Proposed Improvement

Refine search and filter behavior on the Menu page to handle edge cases more gracefully.

Suggested behavior:

  • Show a friendly “No items found” message when search/filter returns zero results, along with a clear way to reset.
  • Make active filters and search query visually clear (e.g., highlighted category button, visible search text).
  • Provide an easy reset action such as:
    • “Clear filters”
    • “Reset search”
  • Handle common variations (case-insensitive search, trimming spaces) so users are less likely to see confusing empty states.

Why This Is Needed

Search and filter are core tools for discovering dishes. If edge cases are not handled well, users can feel lost when the list suddenly empties or when multiple filters interact in unexpected ways. Clear feedback keeps the experience smooth and intuitive.

Expected Result

  • Users always understand why they are seeing an empty list (no results vs. data not loaded).
  • It is easy to clear search and filters and return to the full menu.
  • Combined filters behave predictably, and the current active filters are visually obvious.
  • Searching feels robust even for partial names, different casing, or minor input variations.

Implementation Sketch

  • Audit the current search and filter logic on the Menu page.
  • Add a “no results” state component with explanatory text and a reset action.
  • Highlight active category filters and ensure the search input clearly reflects the current query.
  • Normalize user input (trim spaces, case-insensitive matching).
  • Test scenarios like:
    • Empty search query
    • Search with no matches
    • Category filter with no matches
    • Combined category + search
    • Clearing search and filters

Additional Context

This issue focuses specifically on edge-case UX for existing search/filter functionality, not on adding new search features. It complements ongoing enhancements by making the Menu page more forgiving and easier to understand when users experiment with filters or unusual queries.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions