Adding a Filament form (select component) to a Livewire(v3.x) component

Hi everyone,

I'm trying to implement Filament forms in my livewire component.
What I'm trying to do?
I'm using a filament select component with multiple choices linked to a relation. After saving, the 'interests' aren't displayed upon page refresh, despite being correctly synced in the database. However, when viewed through the filament admin panel, the selected interests are displayed correctly.

class UpdateInterestForm extends Component implements HasForms 
{ 
  use InteractsWithForms;

  public User $user;
  public $interests;
  
  public function mount(): void
  {
      $this->user = Auth::user();
  }
  
  public function updateInterestUser(): void
  {
      $this->user->interests()->sync($this->interests);
  
      $this->dispatch('saved');
  }
  
  public function form(Form $form): Form
  {
      return $form
            ->schema([
                Select::make('interests')
                    ->multiple()
                    ->preload()
                    ->relationship('interests', 'name')
                    ->minItems(1)
                    ->maxItems(15)
            ])
            ->model(User::class);
  }
  
  public function render(): View
  {
      return view('livewire.profile.update-interest-form');
  }
}

class UpdateInterestForm extends Component implements HasForms 
{ 
  use InteractsWithForms;

  public User $user;
  public $interests;
  
  public function mount(): void
  {
      $this->user = Auth::user();
  }
  
  public function updateInterestUser(): void
  {
      $this->user->interests()->sync($this->interests);
  
      $this->dispatch('saved');
  }
  
  public function form(Form $form): Form
  {
      return $form
            ->schema([
                Select::make('interests')
                    ->multiple()
                    ->preload()
                    ->relationship('interests', 'name')
                    ->minItems(1)
                    ->maxItems(15)
            ])
            ->model(User::class);
  }
  
  public function render(): View
  {
      return view('livewire.profile.update-interest-form');
  }
}

Relation in the User model:

php 
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }

php 
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }

Relation in the Interest model:

php 
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }

php 
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }

Note: this very code, Select::make('interests').. in my UserResource filament works just fine, the problem is in the Livewire component.

Filament - UserResource
!image

Livewire -
!image

Adding a Filament form (select component) to a Livewire(v3.x) component

class UpdateInterestForm extends Component implements HasForms 
{ 
  use InteractsWithForms;

  public User $user;
  public $interests;
  
  public function mount(): void
  {
      $this->user = Auth::user();
  }
  
  public function updateInterestUser(): void
  {
      $this->user->interests()->sync($this->interests);
  
      $this->dispatch('saved');
  }
  
  public function form(Form $form): Form
  {
      return $form
            ->schema([
                Select::make('interests')
                    ->multiple()
                    ->preload()
                    ->relationship('interests', 'name')
                    ->minItems(1)
                    ->maxItems(15)
            ])
            ->model(User::class);
  }
  
  public function render(): View
  {
      return view('livewire.profile.update-interest-form');
  }
}

class UpdateInterestForm extends Component implements HasForms 
{ 
  use InteractsWithForms;

  public User $user;
  public $interests;
  
  public function mount(): void
  {
      $this->user = Auth::user();
  }
  
  public function updateInterestUser(): void
  {
      $this->user->interests()->sync($this->interests);
  
      $this->dispatch('saved');
  }
  
  public function form(Form $form): Form
  {
      return $form
            ->schema([
                Select::make('interests')
                    ->multiple()
                    ->preload()
                    ->relationship('interests', 'name')
                    ->minItems(1)
                    ->maxItems(15)
            ])
            ->model(User::class);
  }
  
  public function render(): View
  {
      return view('livewire.profile.update-interest-form');
  }
}

Relation in the User model:

php 
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }

php 
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }

Relation in the Interest model:

php 
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }

php 
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }

Note: this very code, Select::make('interests').. in my UserResource filament works just fine, the problem is in the Livewire component.

Filament - UserResource
!image

Livewire -
!image

Adding a Filament form (select component) to a Livewire(v3.x) component

Adding a Filament form (select component) to a Livewire(v3.x) component

Similar Threads

Similar Threads

Similar Threads