Filament•8mo 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•8mo 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•8mo ago

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

Samus_AranOP•8mo ago

Yes 🙂

Remi Hindriks•7mo 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•7mo ago

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

pedro-vasconcelos•7mo ago

LeandroFerreira•7mo ago

Textarea?

pedro-vasconcelos•7mo ago

Yep Exactly the same error

toeknee•7mo ago

please run: php artisan about

pedro-vasconcelos•7mo ago

It's here:

pedro-vasconcelos•7mo ago

pedro-vasconcelos•7mo ago

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

toeknee•7mo ago

try: ->height('100px')

pedro-vasconcelos•7mo ago

It's an Alpine variable that is not initialized

toeknee•7mo ago

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

pedro-vasconcelos•7mo ago

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

toeknee•7mo ago

Working fine here. run: npm run build

pedro-vasconcelos•7mo ago

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

pedro-vasconcelos•7mo ago

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

Installation - Panel Builder - Filament

toeknee•7mo ago

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

pedro-vasconcelos•7mo ago

I thing the problem is in the loading sequence

pedro-vasconcelos•7mo 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•7mo 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•7mo ago

filament version?

pedro-vasconcelos•7mo ago

v3.2.92

LeandroFerreira•7mo ago

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

pedro-vasconcelos•7mo ago

ok thank you v3.2.94 the same

LeandroFerreira•7mo ago

could you share the whole code?

pedro-vasconcelos•7mo ago

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

LeandroFerreira•7mo ago

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

pedro-vasconcelos•7mo ago

Hi Leandro I've publish the repo here:

pedro-vasconcelos•7mo 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•7mo ago

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

LeandroFerreira•7mo ago

where is the livewire component?

pedro-vasconcelos•7mo 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•7mo ago

pedro-vasconcelos•7mo ago

check again please

pedro-vasconcelos•7mo ago

LeandroFerreira•7mo ago

add

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

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

pedro-vasconcelos•7mo ago

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

LeandroFerreira•7mo ago

add

protected static bool $isLazy = false;

protected static bool $isLazy = false;

pedro-vasconcelos•7mo 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•7mo ago

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

Remi Hindriks•7mo 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•7mo 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

Did you find this page helpful?