598984f291
**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>
68 lines
2.3 KiB
PHP
68 lines
2.3 KiB
PHP
<?php
|
|
|
|
namespace App\View\Components\Forms;
|
|
|
|
use Closure;
|
|
use Illuminate\Contracts\View\View;
|
|
use Illuminate\Support\Facades\Gate;
|
|
use Illuminate\View\Component;
|
|
|
|
class Checkbox extends Component
|
|
{
|
|
public ?string $modelBinding = null;
|
|
|
|
public ?string $htmlId = null;
|
|
|
|
/**
|
|
* Create a new component instance.
|
|
*/
|
|
public function __construct(
|
|
public ?string $id = null,
|
|
public ?string $name = null,
|
|
public ?string $value = null,
|
|
public ?string $domValue = null,
|
|
public ?string $label = null,
|
|
public ?string $helper = null,
|
|
public string|bool|null $checked = false,
|
|
public string|bool $instantSave = false,
|
|
public bool $disabled = false,
|
|
public string $defaultClass = 'dark:border-neutral-700 text-coolgray-400 dark:bg-coolgray-100 rounded-sm cursor-pointer dark:disabled:bg-base dark:disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base',
|
|
public ?string $canGate = null,
|
|
public mixed $canResource = null,
|
|
public bool $autoDisable = true,
|
|
) {
|
|
// Handle authorization-based disabling
|
|
if ($this->canGate && $this->canResource && $this->autoDisable) {
|
|
$hasPermission = Gate::allows($this->canGate, $this->canResource);
|
|
|
|
if (! $hasPermission) {
|
|
$this->disabled = true;
|
|
$this->instantSave = false; // Disable instant save for unauthorized users
|
|
}
|
|
}
|
|
|
|
if ($this->disabled) {
|
|
$this->defaultClass .= ' opacity-40';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get the view / contents that represent the component.
|
|
*/
|
|
public function render(): View|Closure|string
|
|
{
|
|
// Store original ID for wire:model binding (property name)
|
|
$this->modelBinding = $this->id;
|
|
|
|
// Generate unique HTML ID by adding random suffix
|
|
// This prevents duplicate IDs when multiple forms are on the same page
|
|
if ($this->id) {
|
|
$uniqueSuffix = substr(md5(uniqid((string) mt_rand(), true)), 0, 8);
|
|
$this->htmlId = $this->id.'-'.$uniqueSuffix;
|
|
} else {
|
|
$this->htmlId = $this->id;
|
|
}
|
|
|
|
return view('components.forms.checkbox');
|
|
}
|
|
}
|