Commit graph

8 commits

Author SHA1 Message Date
Andras Bacsai
d2a334df78 refactor: replace random ID generation with Cuid2 for unique HTML IDs in form components 2025-10-16 12:54:14 +02:00
Andras Bacsai
598984f291 Fix wire:model warnings and ensure truly unique HTML IDs
**Problems Fixed:**
1. Livewire warnings about non-existent properties (e.g., wire:model="dcgoowgw0gcgcsgg00c8kskc")
2. Duplicate HTML IDs still appearing despite initial fix

**Root Causes:**
1. Auto-generated Cuid2 IDs were being used for wire:model when no explicit id was provided
2. Livewire's wire:id attribute isn't available during server-side rendering

**Solutions:**
1. Set $modelBinding to 'null' (string) when id is not provided, preventing invalid wire:model generation
2. Use random MD5 suffix instead of Livewire component ID for guaranteed uniqueness during initial render
3. Maintain correct $name attribute based on original property name

**Technical Changes:**
- Input, Textarea, Select, Datalist: Use random 8-char suffix for uniqueness
- Checkbox: Apply same random suffix approach
- wire:model now only created for explicit property names
- HTML IDs are unique from initial server render (no hydration required)

**Result:**
 No more Livewire property warnings
 Truly unique HTML IDs across all components
 wire:model bindings work correctly
 Validation and form submission unaffected

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-14 10:32:49 +02:00
Andras Bacsai
a514c837b6 Fix duplicate HTML ID warnings in form components
Resolve browser console warnings about non-unique HTML IDs when multiple
Livewire components with similar form fields appear on the same page.

**Problem:**
Multiple forms using generic IDs like `id="description"` or `id="name"`
caused duplicate ID warnings and potential accessibility/JavaScript issues.

**Solution:**
- Separate `wire:model` binding name from HTML `id` attribute
- Auto-prefix HTML IDs with Livewire component ID for uniqueness
- Preserve existing `wire:model` behavior with property names

**Implementation:**
- Added `$modelBinding` property for wire:model (e.g., "description")
- Added `$htmlId` property for unique HTML ID (e.g., "lw-xyz123-description")
- Updated render() method to generate unique IDs automatically
- Updated all blade templates to use new properties

**Components Updated:**
- Input (text, password, etc.)
- Textarea (including Monaco editor)
- Select
- Checkbox
- Datalist (single & multiple selection)

**Result:**
 All HTML IDs now unique across page
 No console warnings
 wire:model bindings work correctly
 Validation error messages display correctly
 Backward compatible - no changes needed in existing components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-14 10:27:41 +02:00
Andras Bacsai
ac3af8a882 feat: add support for selecting additional SSH keys from Hetzner in server creation form 2025-10-10 12:17:05 +02:00
andrasbacsai
96c4f5b8da Fix styling 2024-07-25 11:31:59 +00:00
Andras Bacsai
6a4aa492c0 fix: random generated uuid will be full length (not 7 characters) 2024-07-25 13:31:01 +02:00
Thijmen
d86274cc37 Fix styling 2024-06-10 20:43:34 +00:00
Andras Bacsai
3e0440ba53 feat: initial datalist 2024-04-26 10:33:55 +02:00