Filament•6mo ago

Custom field with livewire, is it possible?

Hello, I was wondering if it's possible to create a custom field using Livewire? I've attempted a test, and despite everything appearing to be configured correctly, in the end, the field doesn't get saved for that statePath. My requirement is to build an image selection component to use within various forms for different entities, displaying all media with pagination (similar to the media library). Here's a simplified version of the process I've tried:

Copy code
use Filament\Forms\Components\Component;

class CustomField extends Component {
    protected string $view = 'custom-field';
}

Copy code
use Filament\Forms\Components\Component;

class CustomField extends Component {
    protected string $view = 'custom-field';
}

The blade file is:

Copy code
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <livewire:custom-field :state_path="$getStatePath()"></livewire:custom-field>

</x-dynamic-component>

Copy code
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <livewire:custom-field :state_path="$getStatePath()"></livewire:custom-field>

</x-dynamic-component>

Copy code
use Livewire\Component;

class CustomField extends Component
{
    public string $state_path = '';

    public function render()
    {
        return view('custom-field-livewire');
    }
}

Copy code
use Livewire\Component;

class CustomField extends Component
{
    public string $state_path = '';

    public function render()
    {
        return view('custom-field-livewire');
    }
}

And the blade for custom-field-livewire is:

Copy code
@php
$id = uniqid();
@endphp

<input
    id=""
    name="{{ $id }}"
    type="radio"
    value="{{ $media->id }}"
    wire:loading.attr="disabled"
    class="hidden peer media-picker-input"
    wire:model="{{ $state_path }}"
/>

Copy code
@php
$id = uniqid();
@endphp

<input
    id=""
    name="{{ $id }}"
    type="radio"
    value="{{ $media->id }}"
    wire:loading.attr="disabled"
    class="hidden peer media-picker-input"
    wire:model="{{ $state_path }}"
/>

If you have any insights into why the field isn't getting saved for the specified statePath, I would greatly appreciate your assistance.

1 Reply

Stemonte•6mo ago

Solved by reading the documentation in the morning:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
    x-data="{ media_picker_state: $wire.$entangle('{{ $getStatePath() }}') }"
>

    <input type="hidden" x-model="media_picker_state"></input>
    <livewire:media-picker-modal-2 :medias="$getMedias()" :collection="$getCollection()" :media_id="$getState()">

</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
    x-data="{ media_picker_state: $wire.$entangle('{{ $getStatePath() }}') }"
>

    <input type="hidden" x-model="media_picker_state"></input>
    <livewire:media-picker-modal-2 :medias="$getMedias()" :collection="$getCollection()" :media_id="$getState()">

</x-dynamic-component>

and in livewire:

<input
    x-model="media_picker_state"
    />

<input
    x-model="media_picker_state"
    />

Gaming

Programming

Custom field with livewire, is it possible?