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

fix: show file picker empty message below the input line

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,412 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@avoidwork ci sta già lavorando.

Dal 15/10/2026.

  • #1413 di @avoidwork — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
70/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, node.js, react
Ambito
cli

Direzione di ricerca

Inizia da src/tui/filePicker.js, nel blocco return finale del componente FilePicker, dove il Text di input e il messaggio vuoto sono fratelli in un Box a colonna singola. Controlla src/tui/inputArea.js intorno al ramo pickerOpen per vedere come il selettore sostituisce il pannello di input. Riproduci digitando @ seguito da un nome che non corrisponde nella TUI. È completato quando la riga " No matching files." viene mostrata sotto l'input digitato e un test in tests/unit/tui/filePicker.test.js verifica questo ordine.

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

Descrizione

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.
Lingua principale
JavaScript
Stelle
2
Fork
0
Merge medio
1h 34m
PR unite (30g)
231

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

Tutte le issue di avoidwork/madz

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.