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

The playground instrument selector's search matches instrument UUIDs instead of labels, so typing a name finds nothing

Open Beginner friendly
  • Is something wrong?
#1,764 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
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
nodejs, react, typescript
Domain
frontend, testing

Research direction

Read apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx around lines 49–57, then update the e2e coverage in testing/src/specs/playground.spec.ts and the selectInstrument page object in testing/src/pages/playground/index.page.ts. Run the playground e2e test; done means searching for “Form Reference” displays that option and the page object no longer needs its workaround comment.

Written by the indexing model from the issue text.

Description

Area: Playground Bug Difficulty: Low Good First Issue Priority: Medium

The playground instrument selector's search box matches instrument UUIDs instead of labels, so typing an instrument's name finds nothing. Each Command.Item gets value={instrument.id}, and cmdk filters items by value (plus keywords, which are not set). So the typed text is fuzzy-matched against random crypto.randomUUID() strings. Typing Unilingual shows "No Instruments Found". A short query like a or 3 returns an arbitrary set of instruments whose UUIDs happen to contain those characters, and the set changes on every reload because the ids of examples and templates are regenerated each load. The e2e page object already works around this: selectInstrument clicks the option without typing, with the comment "The list's search box matches on instrument ids rather than labels".

Where

apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx:49-57:

{instruments.map((instrument) => (
  <Command.Item
    key={instrument.id}
    value={instrument.id}
    onSelect={(id) => {
      setSelectedInstrument(id);
      setOpen(false);
    }}
  >

Reproduce

  1. Open the playground and click the instrument selector.
  2. Type Unilingual.

Actual: the list shows "No Instruments Found".
Expected: Unilingual Form is listed.

Tests

E2E in testing/src/specs/playground.spec.ts: open the selector, type Form Reference, and assert that the Form Reference option is visible. Change selectInstrument in testing/src/pages/playground/index.page.ts to type the label before clicking, and drop its workaround comment. The fix is a prop on a third-party component and has no logic to unit-test.

Suggested fix

Keep value={instrument.id} for selection and add keywords={[instrument.label]} to each Command.Item (cmdk scores keywords together with the value). Alternatively, use the label as value and select with setSelectedInstrument(instrument.id) from the closure.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

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 DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.