F
Filament•3w ago
AntV

`Typed property Filament...Component::$container must not be accessed before init` from custom field

I have a custom field that I am calling from within the form scheme of a panel. Inside it I have cave a computed property that returns some inputs, I would like to make use of filament's form components though, to keep everything more consistent. If however I do so, I am greeted with the following error: Typed property Filament\Forms\Components\Component::$container must not be accessed before initialization The code that produces the output is this: 
public function makeFilterField($filter) {
        if (!$this->getCategoryId()) {
            return null;
        }
        $field = match ($filter['type']) {
            FilterType::text => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name']),
            FilterType::number => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name'])->numeric(),
            default => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name']),
        };
        return $field;
    }
public function makeFilterField($filter) {
        if (!$this->getCategoryId()) {
            return null;
        }
        $field = match ($filter['type']) {
            FilterType::text => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name']),
            FilterType::number => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name'])->numeric(),
            default => \Filament\Forms\Components\TextInput::make("filters.{$filter['id']}")->label($filter['name']),
        };
        return $field;
    }
It is called within a blade component that looks like this: 
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data x-init="">
    @foreach ($getFilters() as $filter)
        {{ $makeFilterField($filter) }}
    @endforeach
    </div>
</x-dynamic-component>
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data x-init="">
    @foreach ($getFilters() as $filter)
        {{ $makeFilterField($filter) }}
    @endforeach
    </div>
</x-dynamic-component>
Is there a way to perhaps block this until the child components are ready? I tried adding a flag and waiting for afterStateHydrated, but it did not help
1 Reply
AntV
AntVOP•3w ago
So apparently the solution was to create a public function getChildComponents(): array and put the array of components in there, changing the blade component to: 
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data wire:key="filters-{{ $getCategoryId() }}">
        {{ $getChildComponentContainer() }}
    </div>
</x-dynamic-component>
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data wire:key="filters-{{ $getCategoryId() }}">
        {{ $getChildComponentContainer() }}
    </div>
</x-dynamic-component>
I must note that I could not find anything related to this in the documentation

Did you find this page helpful?