Filament•7mo ago

extraAttributes on Form components

                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                            ->extraAttributes([
                                'class' => 'align-self-center',
                            ])

                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                            ->extraAttributes([
                                'class' => 'align-self-center',
                            ])

The class exists in my theme, I ran the build command, and yet its not executet/found when the page loads 🤔

63 Replies

awcodes•7mo ago

Make sure the directory/file is included in your content for your tailwind.config.js. Be cautious though, I’ve found that tailwind’s purge can have issues with php class files.

DarkKnight•7mo ago

Can you please elaborate? What do you mean by this? Also, this is the tailing.config.js of my theme

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

And this is in a Resource file, which means its already included But I still cant see changes

DarkKnight•7mo ago

In fact, now that I checked the console, I have this error? 🤔

DarkKnight•7mo ago

Even if I comment the ->extraAttributes() I still get the errors Issue is on github: https://github.com/filamentphp/filament/issues/10185 But the errors, shouldnt really matter, right? Anyone?

awcodes•7mo ago

Do you have any views published by any chance?

DarkKnight•7mo ago

No, I dont:/. This is from a resource

awcodes•7mo ago

Hmm. I just think if it was a core issue it would have been escalated since the error seems like it would break everyone’s app. Maybe delete the vendor folder and try a fresh composer install. Or make sure you’re running ‘artisan filament:upgrade’ after every composer update.

DarkKnight•7mo ago

I have done both actually 😅 But filament:upgrade doesnt overwrite the published files

awcodes•7mo ago

Filament upgrade calls filament:assets that will force publish the css and js asset files.

DarkKnight•7mo ago

I still get it are you sure it isnt related to this?

awcodes•7mo ago

Are you possibly manually including alpine in a js file somewhere.?

DarkKnight•7mo ago

hm, doubt it. But I will check

awcodes•7mo ago

I’m not sure, but non of my apps are breaking with extraAttributes

DarkKnight•7mo ago

Actually, as mentioned here, it breaks even without extraAttributes

awcodes•7mo ago

Then my apps aren’t breaking that way either. Lol.

DarkKnight•7mo ago

Mine breaks when I use the Toggle on the header of Filter (Above Layout) Actually, scratch that. When I user either component

            ->filters([
                Filter::make('created_at')
                    ->columns(2)
                    ->form([
                        Select::make('x_id')
                            ->label('Project owner')
                            ->columnSpan(1)
                            ->options(User::all()->pluck('name', 'id'))
                            ->multiple()
                            ->searchable(),
                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                    ])
                    ->query(function (Builder $query, array $data): Builder {
                      // magic

                        return $query;
                    }),
            ], layout: FiltersLayout::AboveContent)

            ->filters([
                Filter::make('created_at')
                    ->columns(2)
                    ->form([
                        Select::make('x_id')
                            ->label('Project owner')
                            ->columnSpan(1)
                            ->options(User::all()->pluck('name', 'id'))
                            ->multiple()
                            ->searchable(),
                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                    ])
                    ->query(function (Builder $query, array $data): Builder {
                      // magic

                        return $query;
                    }),
            ], layout: FiltersLayout::AboveContent)

awcodes•7mo ago

There is no toggle filter. It should be Filter::make()->toggle()

awcodes•7mo ago

https://filamentphp.com/docs/3.x/tables/filters/getting-started#using-a-toggle-button-instead-of-a-checkbox

Getting started - Table Builder - Filament

DarkKnight•7mo ago

But even without it I get errors Since im in a form, the components must of of type form, not filter

awcodes•7mo ago

Yea. You’re calling form on a filter. I’m not sure that works.

DarkKnight•7mo ago

it works

DarkKnight•7mo ago

awcodes•7mo ago

Not sure then. Sorry.

DarkKnight•7mo ago

Okk. Thanks. I will open a discussion on github

awcodes•7mo ago

I just don’t understand why a filter would have a form when the make() ties the filter to a field. Unless it was maybe a relationship. And there’s nothing in the docs about a filter supporting a nested form. Unless it was a custom filter.

DarkKnight•7mo ago

It isnt haha

awcodes•7mo ago

Ok.

DarkKnight•7mo ago

The Filter component you see is use Filament\Tables\Filters\Filter Also, afaik, that is the only way to have all filters on the top, where they "work on the query together" Idk how to phrase it 😅

awcodes•7mo ago

Right, but what I’m getting at and not that you are wrong, is that a filter is a form component that is bound to a property on the model. So calling form() on a filter doesn’t make sense to me. And you can have any filter any where you want.

DarkKnight•7mo ago

Actually, ite mentioned here: https://filamentphp.com/docs/3.x/tables/filters/custom Even though it says custom

awcodes•7mo ago

Exactly, custom filters, which you said this wasn’t a custom filter.

DarkKnight•7mo ago

Yeah, my bad But, it shoudlnt matter, yes?

awcodes•7mo ago

Of course it matters. Otherwise it wouldn’t be custom. But if you are using Filter and not a class that extends Filter then it isn’t custom.

DarkKnight•7mo ago

Im not using a class that extends Filter. Its like this:

->filters([
                \Filament\Tables\Filters\Filter::make('created_at')
                    ->columns(2)
                    ->form([
                        Select::make('owner_user_id')
                            ->label('Project owner')
                            ->columnSpan(1)
                            ->options(User::all()->pluck('name', 'id'))
                            ->multiple()
                            ->searchable(),
                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                    ])
                    ->query(function (Builder $query, array $data): Builder {    
                      //
                        return $query;
                    }),
            ], layout: FiltersLayout::AboveContent)

->filters([
                \Filament\Tables\Filters\Filter::make('created_at')
                    ->columns(2)
                    ->form([
                        Select::make('owner_user_id')
                            ->label('Project owner')
                            ->columnSpan(1)
                            ->options(User::all()->pluck('name', 'id'))
                            ->multiple()
                            ->searchable(),
                        Toggle::make('is_ended')
                            ->label('Show active projects only')
                            ->default(true)
                            ->columnSpan(1)
                    ])
                    ->query(function (Builder $query, array $data): Builder {    
                      //
                        return $query;
                    }),
            ], layout: FiltersLayout::AboveContent)

awcodes•7mo ago

That’s my point you’re trying to use custom filter functionality, but on your table you are using the core filter. Instead of a custom filter.

DarkKnight•7mo ago

So what should I do now?

awcodes•7mo ago

Create a custom filter. 🙂

awcodes•7mo ago

https://filamentphp.com/docs/3.x/tables/filters/custom

Custom filters - Table Builder - Filament

DarkKnight•7mo ago

Im sorry, I dont understand how that is different from what I have now? 😅 Both use Filter::make() Like, create a new class?

awcodes•7mo ago

Yes. A new class that extends the filter class. When you use Filament\Tables\Filters\Filter you are not using a custom filer. You are using the core filter that is bound to a model property based on what is defined in the make() modifier. It is not custom. Sorry, I see what you’re getting at now.

DarkKnight•7mo ago

So I make a new component with php artisan make:compoent

awcodes•7mo ago

No, don’t do that.

DarkKnight•7mo ago

Yeah sorry as well. I didnt know thats what the doc meant to say

awcodes•7mo ago

I’m thinking about it wrong. Sorry.

DarkKnight•7mo ago

no problem:)

awcodes•7mo ago

The error doesn’t make sense in the context though. Not sure what’s going on.

DarkKnight•7mo ago

This is so weird I get the error every time I interact with a filter no matter where it is But I dont think that is the reason why I cant apply atributes

awcodes•7mo ago

Do you have other filters too.?

DarkKnight•7mo ago

Yes? Wait no Not in this case But in other resources yes

awcodes•7mo ago

Maybe the issue isn’t with this particular filter.

DarkKnight•7mo ago

It isnt Hm

awcodes•7mo ago

Taking a stab in the dark. Other filters could affect the query. But what doesn’t make sense is that it’s throwing an alpine error. Do you have opcache, by any chance?

DarkKnight•7mo ago

I do!

awcodes•7mo ago

Try clearing that cache.

DarkKnight•7mo ago

But I installed opcache just a couple of hours ago yeah, I already did

awcodes•7mo ago

That was my last guess. Lol.

DarkKnight•7mo ago

I have a command that clears everything:

    public function handle()
    {
        Artisan::call('cache:clear');
        Artisan::call('view:clear');
        Artisan::call('route:clear');
        Artisan::call('config:clear');
        Artisan::call('optimize:clear');
        Artisan::call('icons:cache');
        Artisan::call('route:cache');
        Artisan::call('config:cache');
        Artisan::call('opcache:clear');
        Artisan::call('opcache:compile --force');
    }

    public function handle()
    {
        Artisan::call('cache:clear');
        Artisan::call('view:clear');
        Artisan::call('route:clear');
        Artisan::call('config:clear');
        Artisan::call('optimize:clear');
        Artisan::call('icons:cache');
        Artisan::call('route:cache');
        Artisan::call('config:cache');
        Artisan::call('opcache:clear');
        Artisan::call('opcache:compile --force');
    }

So, it should apply attributes, right? Technically

awcodes•7mo ago

Yes

DarkKnight•7mo ago

Then, I will wait for Dan to fix the Issue, and we'll see from there

awcodes•7mo ago

DarkKnight•7mo ago

Thanks for your effort:)

awcodes•7mo ago

Apparently it’s a bug in livewire. Dan can’t fix that. Hopefully Caleb can address it soon.

DarkKnight•7mo ago

wowow okk. Thanks for letting me know

Gaming

Programming

extraAttributes on Form components