Filament•21h ago

Little help with custom form input

Hey guys, how are you? I'm trying to create a custom input, but I can't capture the value generated by it, and the examples I found weren't very good... I want to interact with these two range sliders, to generate a kind of XY coordinate to position something somewhere else. I can combine and handle the update of the sliders to compose my coordinate, but this value doesn't seem to be visible to other inputs or components of the form. Should I configure some method in the input class for this or should it work automatically? Debugging through the state I can see that the value I expect is in fact in the state, but for some reason I can't capture it in a livewire component of the same form.

7 Replies

Dennis Koch•20h ago

Is the component live? Otherwise the state will only be sent to the server when you click the save button

Helder LimaOP•20h ago

Yes, its a live component. In fact I've tried live and reactive, no joy. Also tried to dd the state on the afterStateUpdated, but it wont fire unless I chance anything else on the form, dont really know why. I guess I'm missing something in the component view...

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{
        state: $wire.$entangle('{{ $getStatePath() }}'),
        horizontal: 50,
        vertical: 50,
        updateState() {
            this.state = `${this.horizontal},${this.vertical}`;
            console.log(this.state);
        },
        init() {
                if (this.state) {
                    const parts = this.state.split(',');
                    this.horizontal = Number(parts[0]) || 50;
                    this.vertical = Number(parts[1]) || 50;
                }

                this.$watch('horizontal', () => this.updateState());
                this.$watch('vertical', () => this.updateState());
            }
     }">
        <!-- Interact with the `state` property in Alpine.js -->
        <div class="flex flex-col gap-y-2">
            <div class="flex flex-col">
                <label class="text-xl font-bold" for="horizontal">Horizontal <span x-text="horizontal"></span></label>
                <div>
                    <div class="w-full">
                        <input x-model="horizontal" class="w-full" name="horizontal" type="range" min="1" max="100" value="50">
                    </div>
                    <div class="flex w-full justify-between">
                        <span class="flex-1 text-left">Esquerda</span>
                        <span class="flex-1 text-center">Meio</span>
                        <span class="flex-1 text-right">Direita</span>
                    </div>
                </div>
            </div>
..... 

    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{
        state: $wire.$entangle('{{ $getStatePath() }}'),
        horizontal: 50,
        vertical: 50,
        updateState() {
            this.state = `${this.horizontal},${this.vertical}`;
            console.log(this.state);
        },
        init() {
                if (this.state) {
                    const parts = this.state.split(',');
                    this.horizontal = Number(parts[0]) || 50;
                    this.vertical = Number(parts[1]) || 50;
                }

                this.$watch('horizontal', () => this.updateState());
                this.$watch('vertical', () => this.updateState());
            }
     }">
        <!-- Interact with the `state` property in Alpine.js -->
        <div class="flex flex-col gap-y-2">
            <div class="flex flex-col">
                <label class="text-xl font-bold" for="horizontal">Horizontal <span x-text="horizontal"></span></label>
                <div>
                    <div class="w-full">
                        <input x-model="horizontal" class="w-full" name="horizontal" type="range" min="1" max="100" value="50">
                    </div>
                    <div class="flex w-full justify-between">
                        <span class="flex-1 text-left">Esquerda</span>
                        <span class="flex-1 text-center">Meio</span>
                        <span class="flex-1 text-right">Direita</span>
                    </div>
                </div>
            </div>
..... 

    </div>
</x-dynamic-component>

I'm using two sliders to make up the state for this component, looks like it doesnt auto read back the state property this way

Dennis Koch•20h ago

You are not applying the state modifiers here: state: $wire.$entangle('{{ $getStatePath() }}'),

Dennis Koch•20h ago

https://filamentphp.com/docs/3.x/forms/fields/custom#obeying-state-binding-modifiers

Custom fields - Forms - Filament

Helder LimaOP•20h ago

Smol progress, the afterStateUpdated is firing on every change on sliders 🙂

Helder LimaOP•20h ago

and its in fact updating my livewire component Thank you Dennis, you killed it 🙏

Gaming

Programming

Little help with custom form input

Did you find this page helpful?