Filament•6mo ago

Component not found on select with native(false) and searchable()

Hi all ! I have a wizard form for my resource (create and edit) but I have a small problem on a specific Select field once the native and/or searchable is activated.

Livewire Entangle Error: Livewire property ['data.products.xxx.content.key_brand'] cannot be found on component: ['app.filament.resources.request-resource.pages.create-request']

I'm not sure why, but it ONLY does it for me on this field. I have other selects in my form with native(false) and searchable() that don't have this problem. If I leave one of the 2 methods, I get the error. If I remove the 2 methods: no error. Here the field (content.key_brand) :

return Step::make('step_2')
    ->schema([
        Repeater::make('products')
                ...
                ->schema([
                    Select::make('content.type')->options([...])->live(),
                    // Product details
                    Section::make('product_details')
                            ->schema(fn(array $state) => $state['content']['type'] === 'Clé' ? [
                                Select::make('content.key_brand')
                                    ->options(KeyBrands::class)
                                    ->required()
                                    ->native(false)
                                    ->searchable(),
                            ])
                ])
    ])

return Step::make('step_2')
    ->schema([
        Repeater::make('products')
                ...
                ->schema([
                    Select::make('content.type')->options([...])->live(),
                    // Product details
                    Section::make('product_details')
                            ->schema(fn(array $state) => $state['content']['type'] === 'Clé' ? [
                                Select::make('content.key_brand')
                                    ->options(KeyBrands::class)
                                    ->required()
                                    ->native(false)
                                    ->searchable(),
                            ])
                ])
    ])

On the CreateRequest.php, I've this method :

protected function getSteps(): array
    {

        return [
            RequestForm::getStep1RequestFormForAdmin(),
            RequestForm::getStep2RequestForm() //here is the method to get the Step,
            RequestForm::getStep3RequestForm(),
        ];
    }

protected function getSteps(): array
    {

        return [
            RequestForm::getStep1RequestFormForAdmin(),
            RequestForm::getStep2RequestForm() //here is the method to get the Step,
            RequestForm::getStep3RequestForm(),
        ];
    }

My CreateRequest.php implements the HasWizard trait. Do you know where the problem might be coming from? Don't hesitate if you need any further information 😇

4 Replies

Flame•5mo ago

Hey @Alexandre, did you get this solved? I'm having the exact same issue, and I found out that is only due to native(false), because searchable() makes the input automatically non-native

AlexandreOP•5mo ago

Unfortunately not 😥 I've removed native() and searchable() but no solutions yet. I can't understand why it's only on this field that the problem occurs.

Benjamin Barreth•5mo ago

I think it's related to this issue: https://github.com/filamentphp/filament/issues/11289

GitHub

searchable() conflict with disable() on Select component · Issue #1...

Package filament/forms Package Version v3.2.25 Laravel Version v10.43 Livewire Version v3.4.4 PHP Version PHP 8.1 Problem description ->seachable() function cause the issue. I need to enable/dis...

Ron•5mo ago

One workaround for issue #11289 is to handle disabled of the select with CSS instead of filament disable() I added these 2 entries to my theme.css

.disabled .choices {
    @apply bg-gray-100 dark:bg-gray-700 opacity-75 cursor-not-allowed pointer-events-none !important;
}

.disabled:first-child {
    @apply bg-gray-100 dark:bg-gray-700 opacity-75 cursor-not-allowed pointer-events-none !important;
}

.disabled .choices {
    @apply bg-gray-100 dark:bg-gray-700 opacity-75 cursor-not-allowed pointer-events-none !important;
}

.disabled:first-child {
    @apply bg-gray-100 dark:bg-gray-700 opacity-75 cursor-not-allowed pointer-events-none !important;
}

Then instead of disabled, i used extraAttributes()

 return Select::make('property_id')
            ->required()
            ->key('property_select')
            ->extraAttributes(function (Get $get) {
               // This field is a cascade from company, disable selection if no company yet
                return ['class' => $get('company_id') ? '' : 'disabled'];
            })
            ->placeholder('Select Property')
            ->selectablePlaceholder(false)
            ->prefixIcon('mdi-home-city')
            ->label('Property')
            ->options(fn (Get $get) => $get('company_id') ? \Central::getPropertyOptions($get('company_id')) : [])
            ->preload()
            ->searchable()
            ->native(false)
            ->loadingMessage('Loading Properties...')
            ->live();

 return Select::make('property_id')
            ->required()
            ->key('property_select')
            ->extraAttributes(function (Get $get) {
               // This field is a cascade from company, disable selection if no company yet
                return ['class' => $get('company_id') ? '' : 'disabled'];
            })
            ->placeholder('Select Property')
            ->selectablePlaceholder(false)
            ->prefixIcon('mdi-home-city')
            ->label('Property')
            ->options(fn (Get $get) => $get('company_id') ? \Central::getPropertyOptions($get('company_id')) : [])
            ->preload()
            ->searchable()
            ->native(false)
            ->loadingMessage('Loading Properties...')
            ->live();

Gaming

Programming

Component not found on select with native(false) and searchable()