From 126eb77be24c529dc9e42eec5cc938da1e9aba8a Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Tue, 14 Apr 2026 16:55:22 -0400 Subject: [PATCH] fix(badges): cancel edit state on field switch, not just on explicit cancel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit toggle_field only changed active_field — it never called cancel_field for the previously open field. Unsaved typed values stayed in edit_full_name_override etc., so reopening a field would show the stale typed value and re-apply it to the badge preview, even though the user had already moved on. New logic: capture was_open, always call cancel_field for the current field (resets edit vars + sets active_field = null), then open the new field if it wasn't the one being closed. Closing a field by re-clicking its pencil now also discards unsaved state, consistent with the explicit [X] button behavior. Also: add global placeholder CSS fix to TODO__Agents.md (scoped workaround already in ae_comp__badge_print_controls; long-term fix belongs in app.css or theme file). Co-Authored-By: Claude Sonnet 4.6 --- documentation/TODO__Agents.md | 20 +++++++++++++++++++ .../ae_comp__badge_print_controls.svelte | 14 ++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/documentation/TODO__Agents.md b/documentation/TODO__Agents.md index 5a0b3e6f..7cf2d330 100644 --- a/documentation/TODO__Agents.md +++ b/documentation/TODO__Agents.md @@ -145,6 +145,26 @@ functionality, but pollutes the console and may cause unhandled promise rejectio - **Badge print controls UX polish:** Scott has improvements in mind — TBD next session. File: `ae_comp__badge_print_controls.svelte`. +### [CSS] Global placeholder text color — too dark in light mode +Placeholder text inherits full input text color in light mode (Tailwind CSS default), making +placeholders indistinguishable from filled-in values. Most visible in badge print controls +where placeholders show the actual badge value (e.g. "John Smith"). + +Workaround: scoped `::placeholder` rule added to `ae_comp__badge_print_controls.svelte` +(gray-400 light / gray-500 dark) — `commit 7733ef8`. + +**Long-term fix:** Add a global rule to the main CSS (e.g. `src/app.css` or a theme file): +```css +::placeholder { + color: #9ca3af; /* gray-400 */ + opacity: 1; /* overrides Firefox's 0.54 default */ +} +.dark ::placeholder { + color: #6b7280; /* gray-500 */ +} +``` +Once the global rule is in place, remove the scoped workaround from the badge controls. + ### [Leads] Exhibitor Lead Scanning — IN PROGRESS (demo-ready prep) diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte index 1561f9ec..822c54d7 100644 --- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte @@ -342,7 +342,19 @@ function font_size_reset( let active_field: string | null = $state(null); function toggle_field(key: string) { - active_field = active_field === key ? null : key; + // Capture whether the caller is closing the field that's already open. + const was_open = active_field === key; + // Always cancel the current field before switching — discards any unsaved edit + // state so stale typed values don't bleed into the badge preview after the + // accordion closes. The explicit [X] button calls cancel_field directly; + // clicking away to another field (or re-clicking the pencil) must do the same. + if (active_field) { + cancel_field(active_field); // resets edit vars + sets active_field = null + } + if (!was_open) { + active_field = key; // open the new field + } + // If was_open: active_field stays null — the field is now closed. } // --- Editable field state ---