Filament•7mo 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.

50 Replies

Samus_AranOP•7mo 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•7mo ago

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

Samus_AranOP•7mo ago

Yes 🙂

Remi Hindriks•6mo ago

running in to the same issue in the adminpanel.

ReferenceError: height is not defined
    at [Alpine] { height }

ReferenceError: height is not defined
    at [Alpine] { height }

on the Textarea field.

LeandroFerreira•6mo ago

Are you using panel builder or only the form builder? Could you share the code?

pedro-vasconcelos•6mo ago

LeandroFerreira•6mo ago

Textarea?

pedro-vasconcelos•6mo ago

Yep Exactly the same error

toeknee•6mo ago

please run: php artisan about

pedro-vasconcelos•6mo ago

It's here:

pedro-vasconcelos•6mo ago

pedro-vasconcelos•6mo ago

vendor/filament/forms/resources/views/components/textarea.blade.php

toeknee•6mo ago

try: ->height('100px')

pedro-vasconcelos•6mo ago

It's an Alpine variable that is not initialized

toeknee•6mo ago

I can see that, I wasn't sure if we were setting it higher up. LEt me check

pedro-vasconcelos•6mo ago

Already tried "->extraAlpineAttributes(['height' => '0px'])"

toeknee•6mo ago

Working fine here. run: npm run build

pedro-vasconcelos•6mo ago

doenst work i'm running npm run dev As stated above, i'm running the form inside a livewire component page

pedro-vasconcelos•6mo ago

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component.

Installation - Panel Builder - Filament

toeknee•6mo ago

Yeah I was too... and it works fine... I suspect your frontend implementation may not be right

pedro-vasconcelos•6mo ago

I thing the problem is in the loading sequence

pedro-vasconcelos•6mo ago

As you can see the textarea.js is loading But the error "textareaFormComponent is not defined" says that doesnt exists Notice the value not defined here:

pedro-vasconcelos•6mo ago

The component ist trying to load the Alpine component here: ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}" I'm using this Livewire component inside a Widget 🤔 Probably filament loads the widget before teh other assets Besides the console error everything works fine 🙂

LeandroFerreira•6mo ago

filament version?

pedro-vasconcelos•6mo ago

v3.2.92

LeandroFerreira•6mo ago

update this please if it won't work, share the whole code please

pedro-vasconcelos•6mo ago

ok thank you v3.2.94 the same

LeandroFerreira•6mo ago

could you share the whole code?

pedro-vasconcelos•6mo ago

It's a private project, but i will try to share these pieces

LeandroFerreira•6mo ago

you could create a mini repo on github to reproduce this issue

pedro-vasconcelos•6mo ago

Hi Leandro I've publish the repo here:

pedro-vasconcelos•6mo ago

https://github.com/pedro-vasconcelos/filament-textarea

GitHub

GitHub - pedro-vasconcelos/filament-textarea

Contribute to pedro-vasconcelos/filament-textarea development by creating an account on GitHub.

pedro-vasconcelos•6mo ago

/go to reach the admin panel, he will fill the login box automatically The widget is on the dashboard

LeandroFerreira•6mo ago

where is the livewire component?

pedro-vasconcelos•6mo ago

app/Livewire/TestWidget.php I went a little bit further and I think filament loads the html with the alpine before alpine-sync loads the textarea.js or in reverse

LeandroFerreira•6mo ago

pedro-vasconcelos•6mo ago

check again please

pedro-vasconcelos•6mo ago

LeandroFerreira•6mo ago

add

public function mount(): void
{
    $this->form->fill();
}

public function mount(): void
{
    $this->form->fill();
}

pedro-vasconcelos•6mo ago

nope does not work i already tested that on the main project

LeandroFerreira•6mo ago

add

protected static bool $isLazy = false;

protected static bool $isLazy = false;

pedro-vasconcelos•6mo ago

WTF It worked Why? Will disable the alpine-async? Thanks a lot for your time 🙂 Obrigado mesmo 🙂 (You have a Portuguese name, I'm from Portugal)

LeandroFerreira•6mo ago

the lazy loading was breaking the lifecycle NP ✌️ @Samus_Aran 👆

Remi Hindriks•6mo ago

How would this work in the panel builder? for future ref: in my case i fixed it in the panelbuilder because i forgot to add

 "post-autoload-dump": [
            "@php artisan filament:upgrade"
        ],

 "post-autoload-dump": [
            "@php artisan filament:upgrade"
        ],

Samus_AranOP•6mo ago

Thank you for tagging me! Fixed the issue on my end as well!

Gaming

Programming

Form with Textarea on custom widget causing JS errors