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

fix: show file picker empty message below the input line

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,412 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@avoidwork ya está trabajando en esto.

Desde el 15/10/2026.

  • #1413 de @avoidwork — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
70/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, node.js, react
Área
cli

Línea de trabajo

Comienza en src/tui/filePicker.js, en el bloque return final del componente FilePicker, donde el Text de entrada y el mensaje vacío son hermanos dentro de un Box de una sola columna. Revisa src/tui/inputArea.js alrededor de la rama pickerOpen para ver cómo el selector reemplaza el panel de entrada. Reproduce escribiendo @ seguido de un nombre que no coincida en la TUI. Está terminado cuando la línea " No matching files." se muestra debajo de la entrada escrita y un test en tests/unit/tui/filePicker.test.js comprueba ese orden.

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

Descripción

approved bug in progress

Summary

When the file picker's @ autocomplete filter matches no files, the "No matching files." empty message is displayed in a way that obscures the input line, so the user cannot see what they typed when they make a typo. The empty message should be positioned below the line the user types on.

Environment

  • OS: Linux 7.0.14-19-pve
  • Node.js: v25.8.1
  • madz version: 1.113.1
  • LLM provider: Unknown — user to confirm

Reproduction

Steps to reproduce the behavior:

  1. Start the madz TUI.
  2. Type @ followed by a typo (e.g., @src/confg where confg does not exist).
  3. Observe the file picker shows "No matching files." but the user cannot see what they typed.

Expected Behavior

The "No matching files." empty message is shown below the line the user types on, so the typed input remains visible.

Actual Behavior

The empty message is displayed in a way that obscures the input line — the user cannot see what they typed when there is a typo.

Additional Context

The FilePicker component in src/tui/filePicker.js renders the input line and the empty message in a single column Box. The empty message positioning needs adjustment so it renders below the input line without obscuring the typed text.

Audit Findings (for Issue #1412)

  • File: src/tui/filePicker.js — The FilePicker renders its own input line (a Text with before/at/after cursor segments) and the empty message as siblings in a single column Box (flexDirection: "column"). The empty message (" No matching files.") is the second child, so it should stack below the input line. The render block is the return React.createElement(Box, { flexDirection: "column", ... }, <input Text>, <empty message or file list>) near the end of the component.
  • File: src/tui/inputArea.js — When pickerOpen is true, the InputPanel is hidden and the FilePicker is rendered in its place (lines ~278). The FilePicker owns the input line while open, so the empty message positioning is entirely within filePicker.js.
  • Likely culprit: The empty message is rendered as a sibling of the input Text in the column. If the message is appearing on the same visual line as the input (or the input line is being obscured), the fix is to ensure the empty message is a distinct child rendered below the input line — e.g., wrap the input Text in its own Box row and place the message in a separate row, or add explicit spacing so the message never overlaps the typed text.
  • Related: src/tui/commandPicker.js has the same pattern ( No matching commands.) — consider matching its behavior for consistency.

Fix Steps

  1. Locate the render — Open src/tui/filePicker.js and find the return React.createElement(Box, { flexDirection: "column", ... }) block near the end of the FilePicker component.
  2. Separate the input line — Wrap the input Text (the before/at/after cursor rendering) in its own Box row so it occupies a distinct line.
  3. Render the empty message below — Ensure the " No matching files." message is a separate child rendered below the input line, so the typed text remains visible when the filter matches nothing.
  4. Add a test — Add a test case in tests/unit/tui/filePicker.test.js (or a render test) that verifies the empty message renders below the input line when the filter has no matches.
  5. Verify — Run npm run test and npm run coverage to confirm no regressions.
Lenguaje dominante
JavaScript
Estrellas
2
Forks
0
Merge medio
1 h 34 min
PR fusionados (30 d)
231

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 avoidwork/madz

Todos los issues de avoidwork/madz

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.