fix(ui): close native date picker after selection on WebKitGTK #189

Merged
maximus merged 1 commit from issue-177-date-picker-blur-workaround into main 2026-05-02 20:01:07 +00:00
Owner

Fixes #177

Diagnostic

  • OS impacte : Linux (Tauri WebView = WebKitGTK).
  • Version dev box : Ubuntu 24.04 + libwebkit2gtk-4.1-0 2.50.4-0ubuntu0.24.04.1.
  • Comportement attendu : <input type="date"> ferme son popup natif apres selection d'une date.
  • Comportement observe (Linux) : popup reste ouvert apres clic, il faut Esc pour le fermer.
  • Comportement Windows (WebView2 / Edge Chromium) : ferme correctement (pas de regression possible avec ce fix).
  • macOS (WKWebView) : non shippe (release.yml ne build que Linux + Windows).
  • Cause : sur WebKitGTK le popup natif du date picker est un widget GTK separe qui ne se ferme pas automatiquement sur commit. Connu, comportement variable selon version GTK / theme.

Fix

e.currentTarget.blur() ajoute en fin de onChange du <input type="date"> de src/pages/SnapshotEditPage.tsx. Force le champ a perdre le focus apres selection, ce qui dismisse le popup sur WebKitGTK. No-op sur les WebViews ou le popup se ferme deja (Edge Chromium, WKWebView), donc pas de regression cross-platform.

Scope

Volontairement limite au fichier in-scope de l'issue (SnapshotEditPage.tsx). Les 7 autres <input type="date"> du codebase (TransactionFilterBar x2, AdjustmentForm, LinkTransfersModal x2, PeriodSelector x2) souffrent du meme bug et necessiteront le meme workaround : suivi dans #188.

BalancePage.tsx mentionne dans le body de #177 : verification faite, pas de <input type="date"> (que des boutons de plage 3M/6M/1A/3A) — out of scope par construction.

Tests

  • npm test : 3720 / 3720 vert.
  • tsc --noEmit : OK.
  • Pas de test automatise ajoute : ce projet n'a pas @testing-library/react ni jsdom configure (convention documentee dans 4 *.test.tsx existants). Le workaround est une primitive DOM (blur()), pas de logique a unit-tester.
  • Smoke test manuel a faire avant merge :
    1. npm run tauri dev
    2. Aller sur /balance/snapshot (creer un compte au prealable si profil neuf)
    3. Cliquer sur le champ date, selectionner une date dans le popup
    4. Avant ce fix : popup reste ouvert, il faut Esc.
    5. Apres ce fix : popup se ferme automatiquement.

Limite Windows

Pas de verification effectuee sur Windows depuis ce dev box Linux. Le risque est minimal : blur() est une API DOM standard, comportement identique cross-WebView ; sur WebView2 le popup se ferme deja avant que blur() soit interprete, donc l'appel est sans effet observable.

Files

  • src/pages/SnapshotEditPage.tsx : +4 lignes (commentaire + blur())
  • CHANGELOG.md + CHANGELOG.fr.md : entree sous Fixed / Corrige
Fixes #177 ## Diagnostic - **OS impacte** : Linux (Tauri WebView = WebKitGTK). - **Version dev box** : Ubuntu 24.04 + `libwebkit2gtk-4.1-0` 2.50.4-0ubuntu0.24.04.1. - **Comportement attendu** : `<input type="date">` ferme son popup natif apres selection d'une date. - **Comportement observe (Linux)** : popup reste ouvert apres clic, il faut Esc pour le fermer. - **Comportement Windows (WebView2 / Edge Chromium)** : ferme correctement (pas de regression possible avec ce fix). - **macOS (WKWebView)** : non shippe (release.yml ne build que Linux + Windows). - **Cause** : sur WebKitGTK le popup natif du date picker est un widget GTK separe qui ne se ferme pas automatiquement sur commit. Connu, comportement variable selon version GTK / theme. ## Fix `e.currentTarget.blur()` ajoute en fin de `onChange` du `<input type="date">` de `src/pages/SnapshotEditPage.tsx`. Force le champ a perdre le focus apres selection, ce qui dismisse le popup sur WebKitGTK. **No-op** sur les WebViews ou le popup se ferme deja (Edge Chromium, WKWebView), donc pas de regression cross-platform. ## Scope Volontairement limite au fichier in-scope de l'issue (`SnapshotEditPage.tsx`). Les **7 autres `<input type="date">` du codebase** (TransactionFilterBar x2, AdjustmentForm, LinkTransfersModal x2, PeriodSelector x2) souffrent du meme bug et necessiteront le meme workaround : suivi dans **#188**. `BalancePage.tsx` mentionne dans le body de #177 : verification faite, pas de `<input type="date">` (que des boutons de plage 3M/6M/1A/3A) — out of scope par construction. ## Tests - `npm test` : 3720 / 3720 vert. - `tsc --noEmit` : OK. - **Pas de test automatise** ajoute : ce projet n'a pas `@testing-library/react` ni `jsdom` configure (convention documentee dans 4 `*.test.tsx` existants). Le workaround est une primitive DOM (`blur()`), pas de logique a unit-tester. - **Smoke test manuel a faire avant merge** : 1. `npm run tauri dev` 2. Aller sur `/balance/snapshot` (creer un compte au prealable si profil neuf) 3. Cliquer sur le champ date, selectionner une date dans le popup 4. **Avant ce fix** : popup reste ouvert, il faut Esc. 5. **Apres ce fix** : popup se ferme automatiquement. ## Limite Windows Pas de verification effectuee sur Windows depuis ce dev box Linux. Le risque est minimal : `blur()` est une API DOM standard, comportement identique cross-WebView ; sur WebView2 le popup se ferme deja avant que `blur()` soit interprete, donc l'appel est sans effet observable. ## Files - `src/pages/SnapshotEditPage.tsx` : +4 lignes (commentaire + `blur()`) - `CHANGELOG.md` + `CHANGELOG.fr.md` : entree sous `Fixed` / `Corrige`
maximus added 1 commit 2026-05-02 19:57:05 +00:00
fix(ui): close native date picker after selection on WebKitGTK (#177)
All checks were successful
PR Check / rust (pull_request) Successful in 22m43s
PR Check / frontend (pull_request) Successful in 2m26s
0d50a92b0e
WebKitGTK (Linux Tauri WebView) does not auto-dismiss the native
<input type="date"> popup after a value commit — the user has to
press Esc. Force-blur on change is a no-op on Edge Chromium WebView2
(Windows) and WKWebView (macOS), where the popup already closes.

Scope narrowed to /balance/snapshot per issue body. Six other date
inputs across the app share the same WebKitGTK bug; tracked in a
follow-up issue rather than bundled here.

Diagnostic: Ubuntu 24.04 + libwebkit2gtk-4.1-0 2.50.4-0ubuntu0.24.04.1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
maximus added the
status:review
type:bug
labels 2026-05-02 19:57:15 +00:00
Author
Owner

/pr-review

Verdict : APPROVE

Resume : fix chirurgical et correct du popup natif <input type="date"> qui ne se ferme pas sur WebKitGTK. Scope volontairement limite avec suivi propre des 7 autres call-sites dans #188.

Securite

Aucun secret, aucune injection possible. blur() est une primitive DOM standard.

Correctness

  • Le fix correspond exactement a l'intent decrit (blur() apres commit de la valeur).
  • e.currentTarget est valide dans le handler synchrone d'onChange (pas de souci de pooling React).
  • No-op cross-platform garanti : si l'element a deja perdu le focus, blur() ne fait rien d'observable.

Tests

  • npm test 3720 / 3720 vert (mentionne dans le PR body).
  • tsc --noEmit OK.
  • Pas de test automatise pour blur() : justification recevable (primitive DOM, pas de logique metier, projet sans setup DOM testing). Smoke test manuel documente.

Quality

  • Commentaire explicatif clair avec reference #177.
  • Conventional commit OK (fix(ui): ...).
  • CHANGELOG mis a jour dans les deux langues sous Fixed / Corrige.
  • Aucun string user-facing ajoute, donc pas de cle i18n a ajouter.

Data

Aucune migration, aucun schema touche.

Suggestion non-bloquante

Quand #188 sera traite, extraire le pattern dans un util reutilisable :

// src/utils/dom.ts
export const blurAfterChange = (e: React.ChangeEvent<HTMLInputElement>) => e.currentTarget.blur();

Pour eviter de repeter le commentaire WebKitGTK 7 fois. Pas requis maintenant — le fix actuel est ship-ready.

## /pr-review **Verdict** : APPROVE **Resume** : fix chirurgical et correct du popup natif `<input type="date">` qui ne se ferme pas sur WebKitGTK. Scope volontairement limite avec suivi propre des 7 autres call-sites dans #188. ### Securite Aucun secret, aucune injection possible. `blur()` est une primitive DOM standard. ### Correctness - Le fix correspond exactement a l'intent decrit (`blur()` apres commit de la valeur). - `e.currentTarget` est valide dans le handler synchrone d'`onChange` (pas de souci de pooling React). - No-op cross-platform garanti : si l'element a deja perdu le focus, `blur()` ne fait rien d'observable. ### Tests - `npm test` 3720 / 3720 vert (mentionne dans le PR body). - `tsc --noEmit` OK. - Pas de test automatise pour `blur()` : justification recevable (primitive DOM, pas de logique metier, projet sans setup DOM testing). Smoke test manuel documente. ### Quality - Commentaire explicatif clair avec reference `#177`. - Conventional commit OK (`fix(ui): ...`). - CHANGELOG mis a jour dans les deux langues sous `Fixed` / `Corrige`. - Aucun string user-facing ajoute, donc pas de cle i18n a ajouter. ### Data Aucune migration, aucun schema touche. ### Suggestion non-bloquante Quand #188 sera traite, extraire le pattern dans un util reutilisable : ```ts // src/utils/dom.ts export const blurAfterChange = (e: React.ChangeEvent<HTMLInputElement>) => e.currentTarget.blur(); ``` Pour eviter de repeter le commentaire WebKitGTK 7 fois. Pas requis maintenant — le fix actuel est ship-ready.
maximus merged commit f9b4e4fa40 into main 2026-05-02 20:01:07 +00:00
maximus deleted branch issue-177-date-picker-blur-workaround 2026-05-02 20:01:07 +00:00
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: maximus/Simpl-Resultat#189
No description provided.