Textarea.jsx: className template literal uses regular quotes — custom classes never applied #61

New Issue

Closed

opened 2026-05-17 17:52:57 -05:00 by null · 0 comments

null commented

2026-05-17 17:52:57 -05:00

Owner

Bug Description

src/components/ui/Textarea.jsx line 9 has a className string wrapped in regular double quotes ("...") instead of backticks (`...`). The ${className} interpolation inside the string is never evaluated — it's rendered as the literal text ${className} in the DOM.

This means any custom classes passed to <Textarea className="..."> are silently ignored.

Current (broken)

className="flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-[#F8FAFC] placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-navy focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}"

Fix

Change the outer quotes to backticks:

className={`flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-[#F8FAFC] placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-navy focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}

Labels

bug, frontend, P1 High

## Bug Description `src/components/ui/Textarea.jsx` line 9 has a className string wrapped in regular double quotes (`"..."`) instead of backticks (`` `...` ``). The `${className}` interpolation inside the string is never evaluated — it's rendered as the literal text `${className}` in the DOM. This means any custom classes passed to `<Textarea className="...">` are silently ignored. ## Current (broken) ```jsx className="flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-[#F8FAFC] placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-navy focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}" ``` ## Fix Change the outer quotes to backticks: ```jsx className={`flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-[#F8FAFC] placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-navy focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`} ``` ## Labels - bug, frontend, P1 High