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

DarkKnightOP•12mo 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

DarkKnightOP•12mo ago

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

DarkKnightOP•12mo 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•12mo ago

Do you have any views published by any chance?

DarkKnightOP•12mo ago

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

awcodes•12mo 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.

DarkKnightOP•12mo ago

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

awcodes•12mo ago

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

DarkKnightOP•12mo ago

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

awcodes•12mo ago

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

DarkKnightOP•12mo ago

hm, doubt it. But I will check

awcodes•12mo ago

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

DarkKnightOP•12mo ago

Actually, as mentioned here, it breaks even without extraAttributes

awcodes•12mo ago

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

DarkKnightOP•12mo 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•12mo ago

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

awcodes•12mo ago

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

Getting started - Table Builder - Filament

DarkKnightOP•12mo ago

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

awcodes•12mo ago

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

DarkKnightOP•12mo ago

it works

DarkKnightOP•12mo ago

awcodes•12mo ago

Not sure then. Sorry.

DarkKnightOP•12mo ago

Okk. Thanks. I will open a discussion on github

awcodes•12mo 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.

DarkKnightOP•12mo ago

It isnt haha

awcodes•12mo ago

Ok.

DarkKnightOP•12mo 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•12mo 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.

DarkKnightOP•12mo ago

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

awcodes•12mo ago

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

DarkKnightOP•12mo ago

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

awcodes•12mo 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.

DarkKnightOP•12mo 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•12mo 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.

DarkKnightOP•12mo ago

So what should I do now?

awcodes•12mo ago

Create a custom filter. 🙂

awcodes•12mo ago

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

Custom filters - Table Builder - Filament

DarkKnightOP•12mo 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•12mo 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.

DarkKnightOP•12mo ago

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

awcodes•12mo ago

No, don’t do that.

DarkKnightOP•12mo ago

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

awcodes•12mo ago

I’m thinking about it wrong. Sorry.

DarkKnightOP•12mo ago

no problem:)

awcodes•12mo ago

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

DarkKnightOP•12mo 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•12mo ago

Do you have other filters too.?

DarkKnightOP•12mo ago

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

awcodes•12mo ago

Maybe the issue isn’t with this particular filter.

DarkKnightOP•12mo ago

It isnt Hm

awcodes•12mo 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?

DarkKnightOP•12mo ago

I do!

awcodes•12mo ago

Try clearing that cache.

DarkKnightOP•12mo ago

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

awcodes•12mo ago

That was my last guess. Lol.

DarkKnightOP•12mo 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•12mo ago

Yes

DarkKnightOP•12mo ago

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

awcodes•12mo ago

DarkKnightOP•12mo ago

Thanks for your effort:)

awcodes•12mo ago

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

DarkKnightOP•12mo ago

wowow okk. Thanks for letting me know

Gaming

Programming

extraAttributes on Form components