Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

When Typing in the Search Bar On Main page, Make Tags Go Away

Open
  • Is something wrong?
#341 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
42/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

The issue gives no file, component, or test to start from. Find the main page’s search bar and tag-rendering entry points, then check how typing is handled. Done means tags go away while the user types in the search bar; the issue does not specify whether they should return afterward.

Written by the indexing model from the issue text.

Description

Summary

On the main page, when you start typing in the problem search box, the tag chips inside the box should disappear. They describe the problem that is currently selected, not what you are typing.

Background

  • Main page: the home page (/), whose first section is the problem picker: a search box where you type or choose a problem.
  • Tags: the small colored chips that show a problem's complexity class (for example "NP-Complete") and problem type. They appear in two places:
    1. on each row of the open dropdown list, and
    2. inside the search box itself, to the right of the text, for the currently selected problem.
  • This issue is about 2, the chips inside the box. Today they stay there while you type, next to text that no longer matches them.

Where

Redux_GUI, default branch ReduxAPI_GUI:

  • components/widgets/SearchBarExtensible.js, renderInput: builds selectedTags from optionTag(selected) and renders them as Chips in the input's endAdornment. It checks only that a problem is selected, never what is typed. The typed text is already tracked in the input state (onInputChange).
  • components/pageblocks/ProblemRowReact.js: passes optionTag (complexity class and problem type) to the search box.
  • SearchBarExtensible is shared. Besides the problem picker, the solver picker (SolveRowReact.js) and visualization picker (VisualizeRowReact.js) also pass optionTag, so a change in the component applies to them too.

Done when

  • While you type in the search box (the text differs from the selected problem's name), the chips inside the box are hidden.
  • The chips come back when the box shows a selected problem again: after you pick one, or after you leave the box and it goes back to the selected problem.
  • The chips on the dropdown rows are unchanged.

Status

Not started; no PR refers to this issue. Filed with only a title (Oct 5). An older branch, feature/home-dropdown-search-and-tags (PR #245, "Flatten problem dropdown with complexity-class tags and searchable filtering", closed), touched this area.

Open questions

  • Should the solver and visualization pickers behave the same way, or only the main problem picker? (The shared component makes "all of them" the simple choice.)

Related

  • #286: tracker for Browse and Home tags and filters.
  • #241 (closed): added complexity-class tags to the home page dropdown.
Dominant language
JavaScript
Stars
3
Forks
18
Avg merge
23h 39m
Merged PRs (30d)
39

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • Ships a Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ReduxISU/Redux_GUI

All issues in ReduxISU/Redux_GUI

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.