Filament•3w ago

Form with Textarea on custom widget causing JS errors

I have a custom widget added to a resource view page. The widget is implementing a form according to https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component. My form is for adding comments, so its quite simple:

public function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\Textarea::make('text')
              ->rows(3)
              ->autosize()
              ->hiddenLabel(true)
              ->placeholder('Write a comment...')
              ->required(),
        ])
        ->model(Comment::class)
        ->statePath('data');
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\Textarea::make('text')
              ->rows(3)
              ->autosize()
              ->hiddenLabel(true)
              ->placeholder('Write a comment...')
              ->required(),
        ])
        ->model(Comment::class)
        ->statePath('data');
}

However, this is causing JS errors in my Browser console:

Alpine Expression Error: textareaFormComponent is not defined
Expression: "textareaFormComponent({ initialHeight: 3.75 })"

Alpine Expression Error: height is not defined
Expression: "{ height }"

Uncaught ReferenceError: textareaFormComponent is not defined

Uncaught ReferenceError: height is not defined

Alpine Expression Error: textareaFormComponent is not defined
Expression: "textareaFormComponent({ initialHeight: 3.75 })"

Alpine Expression Error: height is not defined
Expression: "{ height }"

Uncaught ReferenceError: textareaFormComponent is not defined

Uncaught ReferenceError: height is not defined

Is this a filament bug or an issue on my end? I am on the latest filament version 🤔 The error disappears, if I change from Textarea to Textinput in my form.

3 Replies

Samus_Aran•3w ago

It appears that the issue is somehow caused by the fact that the Resource defines an infolist, which gets rendered on my ViewPage 🤔

LeandroFerreira•3w ago

did you add $this->form->fill() in the mount method?

Samus_Aran•3w ago

Yes 🙂

Gaming

Programming

Form with Textarea on custom widget causing JS errors