Fix Monaco editor @entangle error with unique HTML IDs

**Problem:**
Monaco editor was receiving unique HTML IDs (e.g., "customLabels-a09a7773")
and using them in @entangle(), causing errors:
"Livewire property ['customLabels-a09a7773'] cannot be found"

**Root Cause:**
Monaco editor template uses @entangle($id) to bind to Livewire properties.
After our unique ID fix, $id contained the unique HTML ID with suffix,
not the original property name.

**Solution:**
Pass $modelBinding (original property name) instead of $htmlId to Monaco
editor component. This ensures @entangle() uses the correct property name
while HTML elements still get unique IDs.

**Result:**
 Monaco editor @entangle works correctly
 HTML IDs remain unique
 No Livewire property errors

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-14 10:34:36 +02:00
parent 598984f291
commit ff71b28b81

View file

@ -25,7 +25,7 @@ function handleKeydown(e) {
</label>
@endif
@if ($useMonacoEditor)
<x-forms.monaco-editor id="{{ $htmlId }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
<x-forms.monaco-editor id="{{ $modelBinding }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
name="{{ $modelBinding }}" model="{{ $value ?? $modelBinding }}" wire:model="{{ $value ?? $modelBinding }}"
readonly="{{ $readonly }}" label="dockerfile" />
@else