Filament•10mo ago

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

11 Replies

Dennis Koch•10mo ago

You never populate the interests array on mount()?

Daniel VeselinovOP•10mo ago

I've tried to use $this-interests = $this->user->interest; but it doesn't change anything, just when I click save it doesn't remove the records from the db. But when saving and refreshing the page select input resets.

Dennis Koch•10mo ago

Actually, you shouldn't need $interests at all, as you use ->relationship(). But this ->model(User::class); should be the actual model in an update form, not the class.

Daniel VeselinovOP•10mo ago

Mhm, can you give me an example if that's not a problem. I'll try just now to do the change

Dennis Koch•10mo ago

Sorry, I am in a meeting now. You should just change ->model($this->user)

Daniel VeselinovOP•10mo ago

I've changed it, still the select input didnt change its behavior I've also tried to use CheckBoxList it has similar behavior, it list all interests, and none are checked, then when I check an item every available checkbox is checked... Not exactly sure what I'm doing wrong here.

Daniel VeselinovOP•10mo ago

public function form(Form $form): Form
    {
        return $form
            ->schema([
//                Select::make('interests')
//                    ->multiple()
//                    ->preload()
//                    ->relationship('interests', 'name')
//                    ->minItems(1)
//                    ->maxItems(15),
                CheckboxList::make('interests')
                    ->relationship('interests', 'name')
                    ->searchable()
                    ->columns(3)
            ])
            ->model($this->user);
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
//                Select::make('interests')
//                    ->multiple()
//                    ->preload()
//                    ->relationship('interests', 'name')
//                    ->minItems(1)
//                    ->maxItems(15),
                CheckboxList::make('interests')
                    ->relationship('interests', 'name')
                    ->searchable()
                    ->columns(3)
            ])
            ->model($this->user);
    }

Daniel VeselinovOP•10mo ago

I found a solution.

$this->interests = $this->user->interests->pluck('id')->toArray();

$this->interests = $this->user->interests->pluck('id')->toArray();

Thank you Dennis for point out the mount method.

Dennis Koch•10mo ago

Hm, I thought that this would happen automatically with the ->relationship() but maybe I was wrong

toeknee•10mo ago

I am fairly sure it should too

Daniel VeselinovOP•10mo ago

Maybe my approach is/was different or wrong, but at the end of the day I've got it working 😅 . If I find any other solution related to this I will update my comment. I can share the files if you guys want to check?

Gaming

Programming

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