Filament•2d ago

Select live update problem

I have one Select component and 1 component that I created with ViewField. Here, when the value I selected with Select is updated, the address variable in ViewField is updated accordingly. The problem is, each option I select is replaced by the value of the previous option I selected. I have tried many methods and could not find a solution. This is the first time it happens to me. I wonder where am I doing wrong? Form;

public null|Address $selectedAddress = null;

...
Forms\Components\Select::make('address_id')
    ->label('Address')
    ->options(fn() =>
        $this->user->addresses->mapWithKeys(function ($address) {
            return [
                $address->id => $address->title . ($address->is_default ? ' (Varsayılan)' : ''),
            ];
        })->toArray()
    )
    ->live()
    ->afterStateUpdated(function ($state, $set) {
        if ($state) {
            $this->selectedAddress = $this->user->addresses->find($state);
        } else {
            $this->selectedAddress = null;
        }
    })
    ->columnSpanFull()
    ->required(),
Forms\Components\ViewField::make('address_field')
    ->view('filament.components.address-field')
    ->columnSpanFull()
    ->viewData([
        'address' => $this->selectedAddress ?? null,
    ])

public null|Address $selectedAddress = null;

...
Forms\Components\Select::make('address_id')
    ->label('Address')
    ->options(fn() =>
        $this->user->addresses->mapWithKeys(function ($address) {
            return [
                $address->id => $address->title . ($address->is_default ? ' (Varsayılan)' : ''),
            ];
        })->toArray()
    )
    ->live()
    ->afterStateUpdated(function ($state, $set) {
        if ($state) {
            $this->selectedAddress = $this->user->addresses->find($state);
        } else {
            $this->selectedAddress = null;
        }
    })
    ->columnSpanFull()
    ->required(),
Forms\Components\ViewField::make('address_field')
    ->view('filament.components.address-field')
    ->columnSpanFull()
    ->viewData([
        'address' => $this->selectedAddress ?? null,
    ])

ViewField;

@props([
    'address' => [],
])

@empty($address)
    <div class="text-gray-500">{{ __('No address provided.') }}</div>
@else
    {{ data_get($address, 'title') }}
@endempty

@props([
    'address' => [],
])

@empty($address)
    <div class="text-gray-500">{{ __('No address provided.') }}</div>
@else
    {{ data_get($address, 'title') }}
@endempty

Solution:

Change the view to be with a getter ```php Section::make('Address Details') ->columnSpan(3)...

Jump to solution

3 Replies

Solution

toeknee•2d ago

Change the view to be with a getter

Section::make('Address Details')
    ->columnSpan(3)
    ->dehydrated(false)
    ->live()
    ->schema(fn ($get) => [
  Forms\Components\ViewField::make('address_field')
      ->view('filament.components.address-field', [
        'address' => Address:fine($get('address_id', 0)),
      ])
      ->columnSpanFull()
])

Section::make('Address Details')
    ->columnSpan(3)
    ->dehydrated(false)
    ->live()
    ->schema(fn ($get) => [
  Forms\Components\ViewField::make('address_field')
      ->view('filament.components.address-field', [
        'address' => Address:fine($get('address_id', 0)),
      ])
      ->columnSpanFull()
])

toeknee•2d ago

Notice we pass it in with a schema closure. you could make section a group if you dont' want to render html etc.

Azad Furkan ŞAKAROP•2d ago

Thank you so much, it’s work! 🤝🏼

Gaming

Programming

Select live update problem