createOptionUsing on select not called in livewire component

Hey guys,

I tried to add a form to a livewire component which works really well.
Now I created a select field (Tag) with a relationship with the option to add a new Tag.
I created "createOptionForm" on the select which is working fine and I wanted to include a logic, that it returns firstOrCreate on that creation.
I added "createOptionUsing" as well, but unfortunately this method is not called somehow. I don't know why this is not working.. :/

Has someone an idea?

My code:

class CreateProducts extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }


    public function form(Form $form): Form
    {
        return $form->schema([
            Select::make('tag')
                ->createOptionForm(function () {
                    return [
                        TextInput::make('name')->label('Name')->required(),
                    ];
                })->createOptionUsing(function ($data) {
                    dd($data); // This is never called, instead the form is submitted and the Tag will be created.
                })
                ->preload()
                ->relationship(name: 'tags', titleAttribute: 'name')
                ->multiple(),
        ])
            ->statePath('data')
            ->model(Product::class);
    }

    #[Layout('layouts.app')]
    public function render(): View
    {
        return view('products.create-products');
    }

class CreateProducts extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }


    public function form(Form $form): Form
    {
        return $form->schema([
            Select::make('tag')
                ->createOptionForm(function () {
                    return [
                        TextInput::make('name')->label('Name')->required(),
                    ];
                })->createOptionUsing(function ($data) {
                    dd($data); // This is never called, instead the form is submitted and the Tag will be created.
                })
                ->preload()
                ->relationship(name: 'tags', titleAttribute: 'name')
                ->multiple(),
        ])
            ->statePath('data')
            ->model(Product::class);
    }

    #[Layout('layouts.app')]
    public function render(): View
    {
        return view('products.create-products');
    }

class CreateProducts extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }


    public function form(Form $form): Form
    {
        return $form->schema([
            Select::make('tag')
                ->createOptionForm(function () {
                    return [
                        TextInput::make('name')->label('Name')->required(),
                    ];
                })->createOptionUsing(function ($data) {
                    dd($data); // This is never called, instead the form is submitted and the Tag will be created.
                })
                ->preload()
                ->relationship(name: 'tags', titleAttribute: 'name')
                ->multiple(),
        ])
            ->statePath('data')
            ->model(Product::class);
    }

    #[Layout('layouts.app')]
    public function render(): View
    {
        return view('products.create-products');
    }

class CreateProducts extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }


    public function form(Form $form): Form
    {
        return $form->schema([
            Select::make('tag')
                ->createOptionForm(function () {
                    return [
                        TextInput::make('name')->label('Name')->required(),
                    ];
                })->createOptionUsing(function ($data) {
                    dd($data); // This is never called, instead the form is submitted and the Tag will be created.
                })
                ->preload()
                ->relationship(name: 'tags', titleAttribute: 'name')
                ->multiple(),
        ])
            ->statePath('data')
            ->model(Product::class);
    }

    #[Layout('layouts.app')]
    public function render(): View
    {
        return view('products.create-products');
    }

blade:

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create product') }}
        </h2>
    </x-slot>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">

            <form wire:submit="create">
                {{ $this->form }}
            </form>

            <x-filament-actions::modals />
        </div>
    </div>
</div>

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create product') }}
        </h2>
    </x-slot>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">

            <form wire:submit="create">
                {{ $this->form }}
            </form>

            <x-filament-actions::modals />
        </div>
    </div>
</div>

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create product') }}
        </h2>
    </x-slot>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">

            <form wire:submit="create">
                {{ $this->form }}
            </form>

            <x-filament-actions::modals />
        </div>
    </div>
</div>

<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create product') }}
        </h2>
    </x-slot>
    <div>
        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">

            <form wire:submit="create">
                {{ $this->form }}
            </form>

            <x-filament-actions::modals />
        </div>
    </div>
</div>

Solution

found the problem:
->relationship has much functions inside - including createOptionUsing, which overwrites my own function.

placing "->relationship" on top of "->createOptionUsing" works..

Jump to solution

createOptionUsing on select not called in livewire component

Similar Threads

Similar Threads

Similar Threads