Filament•2mo ago

Using ->native(false) destroys the appearance of the select

Hello, Since updating to Filament v4, I've been having a problem with my selects using ->native(false) See screenshot. Thanks for your help!

Solution:

I did a clean install and reinstalled each package one by one to identify the error. The problem comes from the “saade/filament-autograph” package: “^4.0,” which generates unnecessary CSS that interferes with Tailwind... Here is the code that is causing the problem:...

Jump to solution

20 Replies

LeandroFerreira•2mo ago

looks ok on my end

Select::make('select')
    ->native(false)
    ->options([
        'option1' => 'Option 1',
        'option2' => 'Option 2',
        'option3' => 'Option 3',
    ])

Select::make('select')
    ->native(false)
    ->options([
        'option1' => 'Option 1',
        'option2' => 'Option 2',
        'option3' => 'Option 3',
    ])

Filament version v4.0.1

LeandroFerreira•2mo ago

any console errors?

boulyOP•2mo ago

No. I do not have any errors... It's strange that only the select has this problem.

LeandroFerreira•2mo ago

try to run php artisan filament:assets

boulyOP•2mo ago

That doesn't solve the problem. I had created a custom theme in Filament v3. Could that be the problem? resources/css/filament/admin/theme.css

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament';
@source '../../../../resources/views';

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament';
@source '../../../../resources/views';

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    build: {
        outDir: 'public/build/filament',
    },
});

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    build: {
        outDir: 'public/build/filament',
    },
});

LeandroFerreira•2mo ago

looks ok. Any css customization that could override the select css? Did you publish views?

boulyOP•2mo ago

No I commented the css to be sure and I did not published any views.

LeandroFerreira•2mo ago

php artisan filament:about what is the output?

boulyOP•2mo ago

Filament ....................................................................................................................  
  Blade Icons ...................................................................................................... NOT CACHED  
  Packages .............................. filament, forms, notifications, support, tables, actions, infolists, schemas, widgets  
  Panel Components ................................................................................................. NOT CACHED  
  Version .............................................................................................................. v4.0.1  
  Views .............................................................................................. PUBLISHED: notifications

Filament ....................................................................................................................  
  Blade Icons ...................................................................................................... NOT CACHED  
  Packages .............................. filament, forms, notifications, support, tables, actions, infolists, schemas, widgets  
  Panel Components ................................................................................................. NOT CACHED  
  Version .............................................................................................................. v4.0.1  
  Views .............................................................................................. PUBLISHED: notifications

LeandroFerreira•2mo ago

you have views published. Not sure if it is the issue, but you could remove it temporarily and try it again

boulyOP•2mo ago

Only a notification view. I just deleted it. Same bug

LeandroFerreira•2mo ago

create a simple page php artisan make:filament-page TestPage Add this code:

<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\Select;
use Filament\Pages\Page;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Schemas\Schema;

class TestPage extends Page implements HasSchemas
{
    use InteractsWithSchemas;

    public ?array $data = [];

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

    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                Select::make('select')
                    ->native(false)
                    ->options([
                        'option1' => 'Option 1',
                        'option2' => 'Option 2',
                        'option3' => 'Option 3',
                    ]),
            ])
            ->statePath('data');
    }

    protected string $view = 'filament.pages.test-page';
}

<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\Select;
use Filament\Pages\Page;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Schemas\Schema;

class TestPage extends Page implements HasSchemas
{
    use InteractsWithSchemas;

    public ?array $data = [];

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

    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                Select::make('select')
                    ->native(false)
                    ->options([
                        'option1' => 'Option 1',
                        'option2' => 'Option 2',
                        'option3' => 'Option 3',
                    ]),
            ])
            ->statePath('data');
    }

    protected string $view = 'filament.pages.test-page';
}

<x-filament-panels::page>
    <form wire:submit="create">
        {{ $this->form }}
    </form>
</x-filament-panels::page>

<x-filament-panels::page>
    <form wire:submit="create">
        {{ $this->form }}
    </form>
</x-filament-panels::page>

let me know if it works

boulyOP•2mo ago

Exactly the same error.

LeandroFerreira•2mo ago

some issue related to your project I think just to confirm: did you run npm run dev or build, right?

boulyOP•2mo ago

Yes! Probably. But I followed your update guide to the letter. So others will surely encounter the same problem.

LeandroFerreira•2mo ago

you could create a minimal repo on github, using your project, just to reproduce the issue. I can take a look at this if you want

boulyOP•2mo ago

Thanks. I'll try to do that.

Solution

bouly•2mo ago

public function packageBooted(): void
{
    // Asset Registration
    FilamentAsset::register(
        $this->getAssets(),
        $this->getAssetPackageName()
    );
}

protected function getAssetPackageName(): ?string
{
    return 'saade/filament-autograph';
}

/**
 * @return array<Asset>
 */
protected function getAssets(): array
{
    return [
        AlpineComponent::make('filament-autograph', __DIR__ . '/../resources/dist/filament-autograph.js'),
        Css::make('filament-autograph-styles', __DIR__ . '/../resources/dist/filament-autograph.css'), // HERE !!
    ];
}

public function packageBooted(): void
{
    // Asset Registration
    FilamentAsset::register(
        $this->getAssets(),
        $this->getAssetPackageName()
    );
}

protected function getAssetPackageName(): ?string
{
    return 'saade/filament-autograph';
}

/**
 * @return array<Asset>
 */
protected function getAssets(): array
{
    return [
        AlpineComponent::make('filament-autograph', __DIR__ . '/../resources/dist/filament-autograph.js'),
        Css::make('filament-autograph-styles', __DIR__ . '/../resources/dist/filament-autograph.css'), // HERE !!
    ];
}

Do you know if there is a clean way to prevent the file from being created or loaded? Thanks!

LeandroFerreira•2mo ago

maybe you could open an issue in the plugin github

boulyOP•2mo ago

Thank you for your help. Sorry for the wasted time.

Gaming

Programming

Using ->native(false) destroys the appearance of the select

Did you find this page helpful?