Required Searchable Select Field in Custom Pages Bug

[griggsk]

Package

Form builder

Package Version

v3

How can we help you?

When using a select field with searchable and required in a Livewire custom page the required validation fails. Removing the searchable and it works. It also works fine in a resource panel.

Code

Forms\Components\Select::make('zipcode_id') ->relationship('zipcode', 'zipcode') ->label('Your Oregon Zipcode') ->required() ->searchable(),

In the custom page, I can search and it fills the field with the value but is still fails the required validation so doesn't save.
I get the required error message.

Console errors
When selecting:

• Uncaught TypeError: this.select is null
• Uncaught (in promise) TypeError: this.select is null

Any ideas on how to fix? Thanks

[VincvanAs]

I just had a similar issue with the searchable select component. I don't know if this applies to your error as well, but maybe it will help you.

A temporary fix for you would be to check the path of your form state.

Form::make()
    ->statePath('data')

And based on this add this to the mount:

public function mount()
{
    $this->data = [
        'zipcode_id' => null,
    ];
}

[Fanom2813]

this works , thanks

[griggsk]

Thanks. That didn't work for me.

When I remove the required validation the zipcode does save correctly so it seems to be a conflict with the required validation.

[leandrocfe]

Could you share the whole code please?

[griggsk]

Absolutely: https://github.com/griggsk/osp/blob/main/CreateChild.php

I did more testing and it is not saving the zip to the database when I remove required. But it does save when I remove searchable.

[griggsk]

Line 92 is where the zip is