fix(badges): auto-focus input after accordion animation + mute placeholder text
Auto-focus: requestAnimationFrame (~16ms) fired before the 185ms accordion animation ended — input was still 0px/clipped so focus() silently failed. Changed to setTimeout(210ms) so focus lands after the animation completes. Placeholder color: placeholders show the current badge value (e.g. 'John Smith') so without explicit styling they look identical to filled text. Added scoped CSS rules setting placeholder to gray-400 (light) / gray-500 (dark) so it reads clearly as a hint rather than existing content. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -577,7 +577,10 @@ let select_ref_badge_type: HTMLSelectElement | undefined = $state();
|
|||||||
$effect(() => {
|
$effect(() => {
|
||||||
const field = active_field;
|
const field = active_field;
|
||||||
if (!field) return;
|
if (!field) return;
|
||||||
requestAnimationFrame(() => {
|
// Wait for the accordion CSS animation (185ms ease-out) to finish before focusing.
|
||||||
|
// requestAnimationFrame fires at ~16ms — the input is still 0px / overflow:hidden
|
||||||
|
// at that point, so focus() silently fails. 210ms clears the animation safely.
|
||||||
|
setTimeout(() => {
|
||||||
switch (field) {
|
switch (field) {
|
||||||
case 'name':
|
case 'name':
|
||||||
input_ref_name?.focus();
|
input_ref_name?.focus();
|
||||||
@@ -601,7 +604,7 @@ $effect(() => {
|
|||||||
select_ref_badge_type?.focus();
|
select_ref_badge_type?.focus();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
}, 210);
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Dirty detection: compare live edit value against the last-saved badge obj ---
|
// --- Dirty detection: compare live edit value against the last-saved badge obj ---
|
||||||
@@ -2131,6 +2134,19 @@ let allow_tracking_open = $derived(
|
|||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Placeholder text must read clearly as a hint, not as filled content.
|
||||||
|
The placeholders show the current badge value (e.g. "John Smith") so
|
||||||
|
without this they look identical to a filled-in field. */
|
||||||
|
.ctrl-accordion-inner input::placeholder,
|
||||||
|
.ctrl-accordion-inner textarea::placeholder {
|
||||||
|
color: #9ca3af; /* gray-400 — visually distinct from input text */
|
||||||
|
opacity: 1; /* Firefox sets opacity: 0.54 by default; override it */
|
||||||
|
}
|
||||||
|
:global(.dark) .ctrl-accordion-inner input::placeholder,
|
||||||
|
:global(.dark) .ctrl-accordion-inner textarea::placeholder {
|
||||||
|
color: #6b7280; /* gray-500 in dark mode — readable but clearly a hint */
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- Entrance animation for form content ----
|
/* ---- Entrance animation for form content ----
|
||||||
Triggered each time .open is applied to the parent accordion.
|
Triggered each time .open is applied to the parent accordion.
|
||||||
Pairs with the height animation: content fades + zooms in from
|
Pairs with the height animation: content fades + zooms in from
|
||||||
|
|||||||
Reference in New Issue
Block a user