Custom Form field returning null value in Laravel Filament

Package

Other

Package Version

v2

How can we help you?

Hi Hope you guys doing well. I am building a bulk action modal with some draggable checkbox options.
However, i created the custom form field and used it but when i try to submit it return null.

Below is the screenshot of the modal

Code of my DraggableCheckboxes.php Class

<?php
namespace AppFilamentFormsComponents;

use FilamentFormsComponentsField;

class DraggableCheckboxes extends Field
{
    protected string $view = 'filament.forms.components.draggable-checkboxes';

    protected array $options = [];

    public function options(array $options): static
    {
        $this->options = $options;
        return $this;
    }

    public function getOptions(): array
    {
        return $this->options;
    }

    public function getSelectedValues(): array
    {
        return collect($this->options)
            ->filter(fn ($option) => $option['checked'] ?? false)
            ->pluck('value')
            ->toArray();
    }
}

Code of filament.forms.components.draggable-checkboxes. Alpine js code is not working

<div x-data="{
    options: {{ json_encode($getOptions()) }},
    drop(event) {
        event.preventDefault();
        const draggedIndex = event.dataTransfer.getData('text/plain');
        const draggedOption = this.options[draggedIndex];
        this.options.splice(draggedIndex, 1);
        this.options.splice(event.target.dataset.index, 0, draggedOption);
    },
    deleteOption(index, event) {
        event.preventDefault();
        event.stopPropagation();
        this.options.splice(index, 1);
    }
}" class="draggable-checkboxes p-4 bg-gray-100 border border-gray-300 rounded-lg">
    <template x-for="(option, index) in options" :key="index">
        <div class="draggable-checkbox bg-white p-4 m   b-4 border border-gray-300 rounded-lg shadow-sm cursor-move relative"
            draggable="true" @dragstart="event.dataTransfer.setData('text/plain', index)" @dragover.prevent
            @drop="drop($event)" :data-index="index">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input type="checkbox" :value="option.value" :id="'option-' + index" x-model="option.checked"
                        class="mr-2 cursor-pointer">
                    <label :for="'option-' + index" x-text="option.label"
                        class="select-none cursor-pointer truncate"></label>
                </div>
                <button @click="deleteOption(index, $event)"
                    class="absolute top-2 right-2 text-gray-600 hover:text-red-600 focus:outline-none">
                    <svg class="filament-dropdown-list-item-icon mr-2 h-5 w-5 rtl:ml-2 rtl:mr-0 group-hover:text-white group-focus:text-white text-danger-500"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
        </div>

        <template x-if="(index + 1) % 5 === 0">
            <div class="w-full"></div>
        </template>
    </template>
</div>

<style>
    .draggable-checkboxes {
        display: flex;
        flex-wrap: wrap;
    }

    .draggable-checkbox {
        width: calc(20% - 10px);
        margin-right: 10px;
        cursor: grab;
        position: relative;
    }

    .draggable-checkbox:active {
        cursor: grabbing;
    }

    .draggable-checkbox button {
        transition: color 0.2s;
    }

    .draggable-checkbox button:hover {
        color: #e53e3e;
    }
</style>
<script>
    console.log('aaa');
    document.addEventListener('alpine:init', () => {
        Alpine.data('draggableCheckboxes', () => ({
            options: @json($getOptions()),

            init() {
                this.$watch('options', (newOptions) => {
                    this.$wire.set('state', newOptions);
                });
            },

            drop(event) {
                event.preventDefault();
                const draggedIndex = event.dataTransfer.getData('text/plain');
                const draggedOption = this.options[draggedIndex];
                this.options.splice(draggedIndex, 1);
                this.options.splice(event.target.dataset.index, 0, draggedOption);
            },

            deleteOption(index, event) {
                event.preventDefault();
                event.stopPropagation();
                this.options.splice(index, 1);
            }
        }));
    });
</script>

DraggableCheckboxes::make('your_field')
                                ->label('Custom Draggable Checkbox')->options($uniqueFormFields),

Please help 🙁