🐛 Fixed ID regeneration

resources/views/components/form/date-field.blade.php

@@ -13,7 +13,7 @@
         </div>
     </x-slot>
 
-    <input id="{{ $id }}"
+    <input @if ($id ?? false) id="{{ $id }}" @endif
            class="form-input block w-full rounded-none border-l-0 @if (blank($append ?? null)) rounded-r-md @else border-r-0 @endif transition ease-in-out duration-150 sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
            {{ $attributes }}
            x-data

resources/views/components/form/field.blade.php

@@ -1,4 +1,4 @@
-<div id="container-{{ $id }}"
+<div @if ($id ?? null) id="container-{{ $id }}" @endif
      class="space-y-1"
      @if ($disabled ?? false) data-disabled="true" @endif
      @if ($readOnly ?? false) data-readonly="true" @endif>

resources/views/components/form/input-field.blade.php

@@ -7,7 +7,7 @@
         <x-slot name="prepend">{{ $prepend }}</x-slot>
     @endif
 
-    <input id="{{ $id }}"
+    <input @if ($id ?? false) id="{{ $id }}" @endif
            class="form-input block w-full @if (! blank($prepend ?? null) || ! blank($append ?? null)) rounded-none @endif @if (blank($prepend ?? null)) rounded-l-md @else border-l-0 @endif @if (blank($append ?? null)) rounded-r-md @else border-r-0 @endif transition ease-in-out duration-150 sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
            {{ $attributes }}
            @if ($readOnly) readonly @endif

resources/views/components/form/money-field.blade.php

@@ -13,7 +13,7 @@
         @endif
     </x-slot>
 
-    <input id="{{ $id }}"
+    <input @if ($id ?? false) id="{{ $id }}" @endif
            class="form-input block w-full @if (! blank($currency) || ! blank($prepend ?? null) || ! blank($append ?? null)) rounded-none @endif @if (blank($currency) && blank($prepend ?? null)) rounded-l-md @else border-l-0 @endif @if (blank($append ?? null)) rounded-r-md @else border-r-0 @endif transition ease-in-out duration-150 sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
            {{ $attributes }}
            x-data

resources/views/components/form/number-field.blade.php

@@ -7,7 +7,7 @@
         <x-slot name="prepend">{{ $prepend }}</x-slot>
     @endif
 
-    <input id="{{ $id }}"
+    <input @if ($id ?? false) id="{{ $id }}" @endif
            class="form-input block w-full @if (! blank($prepend ?? null) || ! blank($append ?? null)) rounded-none @endif @if (blank($prepend ?? null)) rounded-l-md @else border-l-0 @endif @if (blank($append ?? null)) rounded-r-md @else border-r-0 @endif transition ease-in-out duration-150 sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
            {{ $attributes }}
            x-data

resources/views/components/form/password-field.blade.php

@@ -8,7 +8,7 @@
         <x-slot name="prepend">{{ $prepend }}</x-slot>
     @endif
 
-    <input id="{{ $id }}"
+    <input @if ($id ?? false) id="{{ $id }}" @endif
            class="form-input block w-full rounded-none @if (blank($prepend ?? null)) rounded-l-md @else border-l-0 @endif border-r-0 transition ease-in-out duration-150 sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
            {{ $attributes }}
            x-ref="input"

resources/views/components/form/select-field.blade.php

@@ -9,7 +9,7 @@
     @endif
 
     <div x-data="{ isOn: false, value: {{ json_encode($value ?: []) }}, options: {{ json_encode($options) }} }"
-         id="{{ $id }}"
+         @if ($id ?? false) id="{{ $id }}" @endif
          class="relative w-full"
          @click.away="isOn = false"
          {{ $attributes }}

resources/views/components/form/textarea-field.blade.php

@@ -8,7 +8,7 @@
         <x-slot name="prepend">{{ $prepend }}</x-slot>
     @endif
 
-    <textarea id="{{ $id }}"
+    <textarea @if ($id ?? false) id="{{ $id }}" @endif
               class="form-input block w-full sm:text-sm sm:leading-5 {{ $errors->has($errorBag) ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red ' : '' }} {{ $readOnly ? 'bg-gray-50 text-gray-500' : '' }}"
               {{ $attributes }}
               @if ($readOnly) readonly @endif

resources/views/components/form/toggle-field.blade.php

@@ -10,7 +10,7 @@
 
     <a x-data="{isOn: {{ $trueValue === $value ? 'true' : 'false' }}, trueValue: {{ var_export($trueValue, true) }}, falseValue: {{ var_export($falseValue, true) }}}"
        {{ $attributes }}
-       id="{{ $id }}"
+       @if ($id ?? false) id="{{ $id }}" @endif
        x-on:click="isOn = {{ $readOnly || $disabled ? 'false' : '! isOn' }}"
        x-init="$watch('isOn', value => $dispatch('input', value ? trueValue : falseValue))"
        role="checkbox"

src/View/Components/Form/Field.php

@@ -2,12 +2,11 @@
 
 namespace Masterix21\XBladeComponents\View\Components\Form;
 
-use Illuminate\Support\Str;
 use Illuminate\View\Component;
 
 class Field extends Component
 {
-    public string $id;
+    public ?string $id;
     public ?string $name;
     public ?string $label;
     public ?string $errorBag;
@@ -29,7 +28,7 @@ public function __construct(
         ?string $placeholder = null,
         bool $hideContainerBorder = false
     ) {
-        $this->id = $id ?: (string) Str::uuid();
+        $this->id = $id;
         $this->name = $name;
         $this->label = $label;
         $this->errorBag = $errorBag;