filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
17.4k stars 2.72k forks source link

formatStateUsing Section empty field #12458

Closed POMXARK closed 3 months ago

POMXARK commented 4 months ago

Package

filament/filament

Package Version

v3.2.71

Laravel Version

v11.4.0

Livewire Version

v3.4.10

PHP Version

PHP 8.2.18

Problem description

if you add a section after another section, then the formatStateUsing method does not work, the field is empty

how to fix this?

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('1 Section'),
                Section::make('2 Section')
                    ->schema([
                        Forms\Components\TextInput::make('id')
                            ->formatStateUsing(fn ($record) => 1)
                    ]),
                Section::make('3 Section'), // breaks the handler formatStateUsing
            ]);
    }

image image

Expected behavior

the architecture of the form should not affect the operation of the formatStateUsing method

Steps to reproduce

create a section with the formatStateUsing method

and create the next section after it

Reproduction repository

https://github.com/POMXARK/bug-filament-formatStateUsing

Relevant log output

No response

giacomomasseron commented 4 months ago

I started to look inside Filament for the first time, so I am not able to fix yet.

What I found is the value is nulled in the HasState Concern, at these lines:

if (! $this->hasDefaultState()) {
    $this->state(null);

    return;
}

The third section does not have a default state, so the all Form state is nulled, overwriting the data of second section.

POMXARK commented 4 months ago

Related issue. correct rendering occurs only for the last element in the list. everything on top breaks

    protected function getFormSchema(): array
    {
        return [
            Tabs::make()
                ->tabs([
                    Tabs\Tab::make('')->schema([
                        Forms\Components\DatePicker::make('startDate')->native(false)
                            ->afterStateUpdated(fn (Get $get) => $this->dispatch('statistics-dates', $get('startDate')))
                            ->live()
                        ,

                        Forms\Components\Section::make()->schema([
                            Forms\Components\Livewire::make(SalesQuantityChart::class)
                        ]),
                        Forms\Components\Livewire::make(SalesQuantity::class),

                    ]),
                    Tabs\Tab::make('')
                ]),
        ];
    }

filament 3 cannot process complex pages. widgets and tabs should have more settings

giacomomasseron commented 3 months ago

Update: if you add another component at the start of the Form, with this code:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // with this component, the state works
            Forms\Components\Select::make('color_id')
                ->label(__('Colors'))
                ->default('blue')
                ->native(false)
                ->selectablePlaceholder(false)
                ->createOptionForm([
                    Forms\Components\Repeater::make('colors')
                        ->simple(
                            Forms\Components\ColorPicker::make('color_name')
                                ->required(),
                        ),
                ])
                ->createOptionUsing(function (array $data): string {
                    return 'Test';
                })
                ->options([
                    'blue' => __('Blue'),
                ]),
            Forms\Components\Section::make('1 Section')->id('section_1'),
            Forms\Components\Section::make('2 Section')->id('section_2')
                ->schema([
                    Forms\Components\TextInput::make('id')
                        ->formatStateUsing(function ($record) {
                            return 5;
                        })
                ]),
            Forms\Components\Section::make('3 Section')->id('section_3'), // NOW IT WORKS
        ]);
}

it works.

danharrin commented 3 months ago

filament 3 cannot process complex pages. widgets and tabs should have more settings

Very silly thing to say, especially when you don't provide any more details

danharrin commented 3 months ago

Original issue fixed in #12819