Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Stop the JSON formatter's Find bar from typing into the JSON

Aperta Adatta ai principianti
  • Qualcosa non va?
#121 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@kudala-bharani ci sta già lavorando.

Dal 19/10/2026.

  • #209 di @kudala-bharani — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, typescript
Ambito
frontend

Direzione di ricerca

Inizia dall'effect alle righe 34-36 di app/(tools)/json-formatter/components/FindBar.tsx, che chiama onScrollTo ogni volta che cambiano le corrispondenze. Poi leggi findScrollTo in app/(tools)/json-formatter/JsonFormatterClient.tsx (righe 309-318), dove il textarea dell'editor riceve il focus e la selezione viene impostata a lunghezza zero. Il lavoro è completo quando una ricerca di più caratteri come email mantiene il focus nel campo di ricerca, lascia invariato il JSON, evidenzia la corrispondenza, e Invio, Shift+Invio, i pulsanti freccia, Esc, il contatore e l'interruttore maiuscole/minuscole continuano a comportarsi come indicano i criteri di accettazione. Verifica con npm run lint, npm run test e npm run build.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug hacktoberfest help wanted

In the JSON formatter, typing in the Find bar jumps into the JSON editor after the first character, so the rest of your search ends up typed into the document.

Steps to reproduce

  1. Load the example JSON and press Cmd/Ctrl+F.
  2. Type email.
  3. After the e, the caret moves into the editor and mail is inserted into the JSON.

Expected: focus stays in the Find box, the JSON doesn't change, and the match is highlighted. The match isn't highlighted today either, because the selection is set to zero length (pos to pos + 0).

The cause: FindBar calls onScrollTo in an effect every time the matches change, and findScrollTo calls el.focus() on the textarea.

Where to look

  • app/(tools)/json-formatter/components/FindBar.tsx (the effect at lines 34 to 36)
  • app/(tools)/json-formatter/JsonFormatterClient.tsx (findScrollTo, lines 311 to 320)

Acceptance criteria

  • Typing a multi-character query keeps focus in the Find box and leaves the JSON untouched
  • Enter, Shift+Enter and the arrow buttons move between matches and select the whole match
  • Escape closes the bar and puts focus back in the editor
  • The match counter and the case toggle still work
  • npm run lint, npm run test and npm run build pass

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #121 in the description.

Lingua principale
TypeScript
Stelle
1
Fork
9
Merge medio
10h 24m
PR unite (30g)
93

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/toolbelt

Tutte le issue di codercops/toolbelt

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.