feat(reports/category): replace category <select> with searchable combobox #103

New issue

Closed

opened 2026-04-19 00:27:02 +00:00 by maximus · 0 comments

maximus commented

2026-04-19 00:27:02 +00:00

Owner

Contexte

Sur /reports/category, le sélecteur de catégorie est un <select> HTML natif (CategoryZoomHeader.tsx). Avec une taxonomie profonde (catégories + sous-catégories), la liste devient longue et la recherche n'est pas fluide.

Proposition

Remplacer le <select> par un combobox saisissable : champ texte + liste filtrée à la volée au fur et à mesure que l'utilisateur tape. Comportement attendu :

Input texte éditable ; focus = ouverture de la liste déroulante.
Filtrage insensible à la casse et aux accents (utiliser normalizeDescription du service de catégorisation si exporté).
Flèches haut/bas pour naviguer, Enter pour sélectionner, Esc pour fermer.
Rendu hiérarchique préservé (indentation parent/enfant comme dans CategoryHierarchySelect si existant).
Accessible (roles combobox, listbox, option ARIA).

Fichiers concernés

src/components/reports/CategoryZoomHeader.tsx (remplacer le select)
Possiblement src/components/shared/ : créer un composant SearchableCombobox réutilisable si on veut standardiser (le même pattern sera utile ailleurs : filtres de rapport, budget, import).

Vérifier si src/components/categories/ contient déjà un picker hiérarchique qu'on peut étendre avant d'en créer un nouveau.

Critères d'acceptation

Le sélecteur de catégorie sur /reports/category est un combobox avec saisie.
Recherche insensible à la casse et aux accents.
Navigation clavier complète (↑/↓/Enter/Esc).
Hiérarchie visible dans la liste.
Traductions FR/EN du placeholder.
CHANGELOG sous ## [Unreleased].

## Contexte Sur `/reports/category`, le sélecteur de catégorie est un `<select>` HTML natif (`CategoryZoomHeader.tsx`). Avec une taxonomie profonde (catégories + sous-catégories), la liste devient longue et la recherche n'est pas fluide. ## Proposition Remplacer le `<select>` par un **combobox saisissable** : champ texte + liste filtrée à la volée au fur et à mesure que l'utilisateur tape. Comportement attendu : - Input texte éditable ; focus = ouverture de la liste déroulante. - Filtrage insensible à la casse et aux accents (utiliser `normalizeDescription` du service de catégorisation si exporté). - Flèches haut/bas pour naviguer, `Enter` pour sélectionner, `Esc` pour fermer. - Rendu hiérarchique préservé (indentation parent/enfant comme dans `CategoryHierarchySelect` si existant). - Accessible (roles `combobox`, `listbox`, `option` ARIA). ## Fichiers concernés - `src/components/reports/CategoryZoomHeader.tsx` (remplacer le select) - Possiblement `src/components/shared/` : créer un composant `SearchableCombobox` réutilisable si on veut standardiser (le même pattern sera utile ailleurs : filtres de rapport, budget, import). Vérifier si `src/components/categories/` contient déjà un picker hiérarchique qu'on peut étendre avant d'en créer un nouveau. ## Critères d'acceptation - [ ] Le sélecteur de catégorie sur `/reports/category` est un combobox avec saisie. - [ ] Recherche insensible à la casse et aux accents. - [ ] Navigation clavier complète (↑/↓/Enter/Esc). - [ ] Hiérarchie visible dans la liste. - [ ] Traductions FR/EN du placeholder. - [ ] CHANGELOG sous `## [Unreleased]`.