Filament•17mo ago

UI glitch/issue with a Page (Livewire component)

So, I made a filament page and I added a form with a file upload. This creates some weird UI glitches; the navigation dropdown is gone and the profile dropdown is opened and reversed. Is this because of me or a bug? I read the doc according to: https://filamentphp.com/docs/2.x/forms/layout https://filamentphp.com/docs/2.x/forms/fields

<x-filament::page>
    <body>
        {{$this->form}}
    </body>
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>
</x-filament::page>

<x-filament::page>
    <body>
        {{$this->form}}
    </body>
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>
</x-filament::page>

Filament

Layout - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

Filament

Fields - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

Solution:

Remove the body tags in your blade file. You’re confusing the browser. They are already part of the page component.

Jump to solution

26 Replies

MatthewOP•17mo ago

<?php

namespace App\Filament\Pages;

use App\Models\User;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Filament\Actions\Action;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables;

class Settings extends Page implements HasTable 
{   
    use InteractsWithTable;
    use InteractsWithForms;

    public $text = 'Click me';

    // protected static ?string $slug = 'settings';

    protected static ?string $navigationIcon = 'heroicon-m-document-text';

    protected static string $view = 'filament.pages.settings';

    public function like(){
        $this->text = 'wow';
    }

    protected function getTableQuery(): Builder
    {
        return User::query()->latest();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make('id'),
            Tables\Columns\TextColumn::make('users.name')
                ->label('Customer'),
        ];
    }

    protected function getFormSchema(): array
    {
        return [
            FileUpload::make('attachment'),
        ];
    }

    // public function render(): View
    // {
    //     return view('list-products');
    // }
    
}

<?php

namespace App\Filament\Pages;

use App\Models\User;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Filament\Actions\Action;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables;

class Settings extends Page implements HasTable 
{   
    use InteractsWithTable;
    use InteractsWithForms;

    public $text = 'Click me';

    // protected static ?string $slug = 'settings';

    protected static ?string $navigationIcon = 'heroicon-m-document-text';

    protected static string $view = 'filament.pages.settings';

    public function like(){
        $this->text = 'wow';
    }

    protected function getTableQuery(): Builder
    {
        return User::query()->latest();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make('id'),
            Tables\Columns\TextColumn::make('users.name')
                ->label('Customer'),
        ];
    }

    protected function getFormSchema(): array
    {
        return [
            FileUpload::make('attachment'),
        ];
    }

    // public function render(): View
    // {
    //     return view('list-products');
    // }
    
}

Solution

awcodes•17mo ago

Remove the body tags in your blade file. You’re confusing the browser. They are already part of the page component.

MatthewOP•17mo ago

Thank you Is it possible o have filament components inside the blade file?

<x-filament::page>
    {{-- {{$this->form}} --}}
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>
    @php
        // namespace Filament\Form\Components;
        function getFormSchema(): array
            {
                return [
                    Filament\Forms\Components\FileUpload;
                ];
            }
        
    @endphp
    {{-- <x-filament::fileUpload>
        <form wire:submit.prevent="save">
            <input type="file" wire:model="photo">
         
            @error('photo') <span class="error">{{ $message }}</span> @enderror
         
            <button type="submit">Save Photo</button>
        </form>
    </x-filament::file-upload> --}}
</x-filament::page>

<x-filament::page>
    {{-- {{$this->form}} --}}
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>
    @php
        // namespace Filament\Form\Components;
        function getFormSchema(): array
            {
                return [
                    Filament\Forms\Components\FileUpload;
                ];
            }
        
    @endphp
    {{-- <x-filament::fileUpload>
        <form wire:submit.prevent="save">
            <input type="file" wire:model="photo">
         
            @error('photo') <span class="error">{{ $message }}</span> @enderror
         
            <button type="submit">Save Photo</button>
        </form>
    </x-filament::file-upload> --}}
</x-filament::page>

awcodes•17mo ago

technically, yes, but I wouldn't recommend them for form / table components since they usually have added functionality tied to them.

MatthewOP•17mo ago

Alright. One last question. I see there is <x-filament::page>, <x-filament::card>, are there more? How does this work exactly?

awcodes•17mo ago

yea, there's plenty, it's on the road map to get them documented for v3, so for now you'd have to dive into the source code in vendor/filament you can look and the panels code to see how a lot of them are being used

MatthewOP•17mo ago

Perfect. I will have a look at them. Would like to help documenting them if thats possible

awcodes•17mo ago

thanks, i'll keep that in mind. and pass it up the chain when the time comes.

MatthewOP•17mo ago

Could you please guide be where about? There are a lot of files and folders to look into

awcodes•17mo ago

filament/filament, that's the right one. Panels get's renamed to filament through composer. they are spread throughout all of those, though.

MatthewOP•17mo ago

I think I got the hang of how it works, but I think its incomplete. I get this error:

MatthewOP•17mo ago

Just writing the component is obviously not enough. Can you give any hints as to what needs to happen next?

awcodes•17mo ago

Like I said some views require extra functionality or attributes to make them work.

MatthewOP•17mo ago

sorry for the tag, but can you shed some light please? @danharrin Ive looked through the source code, but couldnt find anything helpful

Dan Harrin•17mo ago

v2 or v3

MatthewOP•17mo ago

<x-filament::page>
    {{-- {{$this->form}} --}}
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>

    <x-filament::card>
        {{ $this->form }}
    </x-filament::card>


    {{-- @livewire('settings') --}}
    {{-- @livewireScripts --}}
    <x-filament-forms::file-upload>
    </x-filament-forms::file-upload>

</x-filament::page>

<x-filament::page>
    {{-- {{$this->form}} --}}
    <x-filament::card>
        <button wire:click="like">{{ $text }}</button>
    </x-filament::card>

    <x-filament::card>
        {{ $this->form }}
    </x-filament::card>


    {{-- @livewire('settings') --}}
    {{-- @livewireScripts --}}
    <x-filament-forms::file-upload>
    </x-filament-forms::file-upload>

</x-filament::page>

<?php

namespace App\Filament\Pages;

use App\Models\User;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Contracts\HasForms;
use Filament\Actions\Action;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables;
use Filament\Forms\Components\View;

class Settings extends Page implements HasTable 
{   
    use InteractsWithTable;
    use InteractsWithForms;

    public $text = 'Click me';

    // protected static ?string $slug = 'settings';

    protected static ?string $navigationIcon = 'heroicon-m-document-text';

    protected static string $view = 'filament.pages.settings';

    protected string $getFieldWrapperView = "x-filament-forms::file-upload";
    public function like(){
        $this->text = 'wow';
    }

    protected function getTableQuery(): Builder
    {
        return User::query()->latest();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make('id'),
            Tables\Columns\TextColumn::make('users.name')
                ->label('Customer'),
        ];
    }

    protected function getFormSchema(): array
    {
        return [
            FileUpload::make('attachment'),
        ];
    }
    public static function make(): static
    {
        View::make('filament.forms.components.file-upload');
        return new static();
    }
}

<?php

namespace App\Filament\Pages;

use App\Models\User;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Form;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Contracts\HasForms;
use Filament\Actions\Action;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;
use Filament\Tables;
use Filament\Forms\Components\View;

class Settings extends Page implements HasTable 
{   
    use InteractsWithTable;
    use InteractsWithForms;

    public $text = 'Click me';

    // protected static ?string $slug = 'settings';

    protected static ?string $navigationIcon = 'heroicon-m-document-text';

    protected static string $view = 'filament.pages.settings';

    protected string $getFieldWrapperView = "x-filament-forms::file-upload";
    public function like(){
        $this->text = 'wow';
    }

    protected function getTableQuery(): Builder
    {
        return User::query()->latest();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make('id'),
            Tables\Columns\TextColumn::make('users.name')
                ->label('Customer'),
        ];
    }

    protected function getFormSchema(): array
    {
        return [
            FileUpload::make('attachment'),
        ];
    }
    public static function make(): static
    {
        View::make('filament.forms.components.file-upload');
        return new static();
    }
}

Dan Harrin•17mo ago

actually i see its v3, this is a beta period and things arent stable yet, please open an issue and i will look into it. no time to read the entire thread try reproducing the issue in a new app and you'll probably work out the cause

MatthewOP•17mo ago

I will try it in v2 now Im doing it in a new app it just has filament beta 17 I created a discussion instead of an issue, as this feels more of a question than a bug/issue.

awcodes•17mo ago

I think the problem is that you’re trying to use a file upload component without it being tied to any form state. Several components, especially form fields require attributes passed in from the form to work properly. That’s what I was trying to get at earlier.

MatthewOP•17mo ago

Ahh, oke. This is much more informative. Thank you

MatthewOP•17mo ago

Are you available to have a look at the discussion? Its getting a bit lost in the list https://github.com/filamentphp/filament/discussions/7255

GitHub

Undefined variable $getFieldWrapperView · filamentphp filament · Di...

Filament version: v3.0.0-beta17 Laravel version: 10.16.1 PHP version: 8.2.8 Both in Filament v2 and v3, whenever I create a form component in a blade file, I get this error: Undefined variable $get...

MatthewOP•17mo ago

I still havent quite figured out which attributes I need to pass, of if Im even passing them correctly

Dan Harrin•17mo ago

You cannot instantiate form components as blade components you must use the form builder properly with classes and a livewire component

MatthewOP•17mo ago

Do you know which components can be instantiated from blade? For example filament::card works. Only UI elements? Or does it just depend what I need to do?

Dan Harrin•17mo ago

check components in support/resources/components we will document the ones you can use soon

MatthewOP•17mo ago

Perfect. Will have a look Yeah, I wanted to learn how they work so I could help with the documentation 😅

Gaming

Programming

UI glitch/issue with a Page (Livewire component)