Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#121 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@kudala-bharani ya está trabajando en esto.

Desde el 19/10/2026.

  • #209 de @kudala-bharani — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nextjs, typescript
Área
frontend

Línea de trabajo

Empieza por el efecto de las líneas 34 a 36 de app/(tools)/json-formatter/components/FindBar.tsx, que llama a onScrollTo cada vez que cambian las coincidencias. Después lee findScrollTo en app/(tools)/json-formatter/JsonFormatterClient.tsx (líneas 309 a 318), donde el textarea del editor recibe el foco y la selección se establece con longitud cero. Está terminado cuando una consulta de varios caracteres, como email, mantiene el foco en el cuadro de búsqueda, deja el JSON sin cambios, resalta la coincidencia, y Enter, Shift+Enter, los botones de flecha, Escape, el contador y el interruptor de mayúsculas y minúsculas siguen comportándose según indican los criterios de aceptación. Verifícalo con npm run lint, npm run test y npm run build.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
9
Merge medio
10 h 24 min
PR fusionados (30 d)
93

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/toolbelt

Todos los issues de codercops/toolbelt

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.