## [Bug] Placeholder Text Overlaps and Causes Interaction Issues in Fundraiser Item Name Field #194

New Issue

2026-05-24T16:17:22Z

enjin2310 commented

2026-05-24 16:17:22 +00:00

🧩 Summary

In the Fundraisers section, during step 2 (Artículos) of the fundraiser configuration modal, the item name input field exhibits overlapping placeholder text and inconsistent interaction behavior. When clicking to type, the placeholder does not disappear correctly, causing visual clutter and confusion.

🧪 Steps to Reproduce

Navigate to learn.spikersoft.com/fundraisers.
Click Nueva recaudación.
Proceed to step 2 (Artículos) in the configuration modal.
Click on the Nombre del artículo input field.
Observe that the placeholder text overlaps with the typed text or remains visible during interaction.

✅ Expected Behavior

The placeholder should:

Disappear immediately when the user clicks or starts typing.
Reappear only when the field is empty and unfocused.
Allow smooth text input without visual interference.

❌ Actual Behavior

Placeholder text remains visible while typing.
Text overlaps, creating a confusing visual effect.
Input field interaction feels inconsistent or “sticky.”

📸 Evidence

The attached screenshot shows the “Barra de chocolat” input partially overlapping with the placeholder text, confirming the rendering issue.

🧠 Possible Root Cause

CSS or JavaScript misconfiguration in the input component.
Placeholder not properly cleared on focus or input events.
Missing conditional rendering logic for placeholder visibility.

🔧 Suggested Fix

Adjust input field behavior to clear placeholder on focus:

<input
  type="text"
  placeholder={isFocused ? '' : 'Nombre del artículo'}
  onFocus={() => setIsFocused(true)}
  onBlur={() => setIsFocused(false)}
/>

### 🧩 Summary In the **Fundraisers** section, during step 2 (**Artículos**) of the fundraiser configuration modal, the **item name input field** exhibits overlapping placeholder text and inconsistent interaction behavior. When clicking to type, the placeholder does not disappear correctly, causing visual clutter and confusion. ### 🧪 Steps to Reproduce 1. Navigate to `learn.spikersoft.com/fundraisers`. 2. Click **Nueva recaudación**. 3. Proceed to step 2 (**Artículos**) in the configuration modal. 4. Click on the **Nombre del artículo** input field. 5. Observe that the placeholder text overlaps with the typed text or remains visible during interaction. ### ✅ Expected Behavior The placeholder should: - Disappear immediately when the user clicks or starts typing. - Reappear only when the field is empty and unfocused. - Allow smooth text input without visual interference. ### ❌ Actual Behavior - Placeholder text remains visible while typing. - Text overlaps, creating a confusing visual effect. - Input field interaction feels inconsistent or “sticky.” ### 📸 Evidence The attached screenshot shows the **“Barra de chocolat”** input partially overlapping with the placeholder text, confirming the rendering issue. ### 🧠 Possible Root Cause - CSS or JavaScript misconfiguration in the input component. - Placeholder not properly cleared on focus or input events. - Missing conditional rendering logic for placeholder visibility. ### 🔧 Suggested Fix 1. Adjust input field behavior to clear placeholder on focus: ```js <input type="text" placeholder={isFocused ? '' : 'Nombre del artículo'} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} />

Screenshot 2026-05-24 121453.png

146 KiB

spikerj commented

2026-06-08 15:32:14 +00:00

Fixed in spikersoft-angular PR #14 (same two input fields as #195).

Root cause: the item-name and cost fields each had a floating mat-label and a redundant placeholder, so the duplicated text appeared to overlap the value being typed. Removed the redundant placeholders (Material's recommended pattern when a floating label is present), leaving a single clean label.

Fixed in spikersoft-angular PR #14 (same two input fields as #195). Root cause: the item-name and cost fields each had a floating `mat-label` *and* a redundant `placeholder`, so the duplicated text appeared to overlap the value being typed. Removed the redundant placeholders (Material's recommended pattern when a floating label is present), leaving a single clean label.

spikerj referenced this issue

2026-06-08 15:32:22 +00:00

## [Bug] Text Input Box Unresponsive and Text Not Displayed Correctly in Fundraising Creation Modal #193

spikerj closed this issue

2026-06-08 15:32:40 +00:00

spikerj referenced this issue

2026-07-09 01:40:06 +00:00

backend: expand integration coverage — art pipe messaging, safety RPC, GPU leases, quiz path #465

spikerj referenced this issue

2026-07-16 05:07:14 +00:00

[Bug][Frontend] NG0951 console spam on C# playground load — viewChild.required(LanguageRunner) read during CD before the child mounts #609

Sign in to join this conversation.