FilamentF
Filament•12mo ago
valeum

TagsInput Field Inside Relationship in Tabs Throws "this.state is null" Error

What I am trying to do:
I am trying to use the TagsInput field inside a Tabs component with a relationship() method to manage related model data (blog.meta_keywords). I want the tags to be saved within a related blog model.

What I did:
I created a Tabs component with a relationship()

My issue/the error:
When I try to add a tag in the TagsInput field, I get the following error in the browser console:
Alpine Expression Error: this.state is null

Expression: "["x-on:keydown"](t){["Enter",...n].includes(t.key)&&(t.preventDefault(),t.stopPropagation(),this.createTag())}"

<input id="data.blog.meta_keywords" class="fi-input block w-full bo…-6 bg-white/0 ps-3 pe-3" autocomplete="off" list="data.blog.meta_keywords-suggestions" placeholder="New tag" type="text" x-bind="input">


Code:
Here is the complete code snippet for the form:
return $form
    ->schema([
        Forms\Components\Section::make()
            ->schema([
                Forms\Components\Fieldset::make()
                    ->schema([
                        Forms\Components\Select::make('website_id')
                            ->label('Website')
                            ->options(Website::all()->pluck('name', 'id')),
                    ]),
            ]),

        Forms\Components\Tabs::make('Tabs')
            ->tabs([
                Forms\Components\Tabs\Tab::make('Blog')
                    ->schema([
                        Forms\Components\Fieldset::make('Meta')
                            ->relationship('blog')
                            ->schema([
                                Forms\Components\Textarea::make('meta_description')
                                    ->label('Description'),

                                Forms\Components\TagsInput::make('meta_keywords')
                                    ->label('Keywords'),
                            ]),
                    ])
            ]),
    ]);
Was this page helpful?