Filament•4mo ago

Select Multiple always active

Hi, I have my filament select rendered also when I goes into the modal, he will be always active by default and when I click outside the select component it still showing active hmm. If I make it not multiple it work perfectly. Using Google Chrome. My code

<?php

namespace App\Livewire\Metier;

use App\Models\TeamMetier;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Support\Collection;
use Livewire\Component;

class ShowMetier extends Component implements HasForms
{
    use InteractsWithForms;

    public TeamMetier $metier;
    public $showDropdown = false;
    public $manageMetier = false;
    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill($this->data);
    }
    public function toggleDropdown()
    {
        $this->showDropdown = !$this->showDropdown;
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('users')
                    ->multiple()
                    ->options(
                        $this->metier->team->users()->whereDoesntHave('teamMetiers', function ($subQuery) {
                            $subQuery->where('metier_id', $this->metier->id);
                        })->get()->pluck('name', 'id')
                    )
                    ->searchable()
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        $form = $this->form->getState();
        
        foreach ($form['users'] as $user) {
            $this->metier->users()->attach($this->metier->id, ['user_id' => $user]);
        }

        $this->dispatch('refreshTable');
    }

    public function render()
    {
        return view('livewire.metier.show-metier');
    }
}

<?php

namespace App\Livewire\Metier;

use App\Models\TeamMetier;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Support\Collection;
use Livewire\Component;

class ShowMetier extends Component implements HasForms
{
    use InteractsWithForms;

    public TeamMetier $metier;
    public $showDropdown = false;
    public $manageMetier = false;
    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill($this->data);
    }
    public function toggleDropdown()
    {
        $this->showDropdown = !$this->showDropdown;
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('users')
                    ->multiple()
                    ->options(
                        $this->metier->team->users()->whereDoesntHave('teamMetiers', function ($subQuery) {
                            $subQuery->where('metier_id', $this->metier->id);
                        })->get()->pluck('name', 'id')
                    )
                    ->searchable()
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        $form = $this->form->getState();
        
        foreach ($form['users'] as $user) {
            $this->metier->users()->attach($this->metier->id, ['user_id' => $user]);
        }

        $this->dispatch('refreshTable');
    }

    public function render()
    {
        return view('livewire.metier.show-metier');
    }
}

And a video 🙂

15 Replies

Kireck17•4mo ago

How to render the livewire component in the modal?

Clement•4mo ago

My component is rendered like this @Kireck17

Kireck17•4mo ago

And how to call this component in Action::make() and pass metier variable?

Clement•4mo ago

@Kireck17 In my create methods in my forms component I have my createMethods trigerred by the form:

    public function create(): void
    {
        $form = $this->form->getState();
        
        foreach ($form['users'] as $user) {
            $this->metier->users()->attach($this->metier->id, ['user_id' => $user]);
        }

        $this->dispatch('refreshTable');
    }

    public function create(): void
    {
        $form = $this->form->getState();
        
        foreach ($form['users'] as $user) {
            $this->metier->users()->attach($this->metier->id, ['user_id' => $user]);
        }

        $this->dispatch('refreshTable');
    }

I have the event "refreshTable" which is listened in my livewire "metier.list-metier" components (cf screenshot)

Clement•4mo ago

Also When I create it works perfectly with my event listener, I think it's a style issue with my select multiple mmh I don't have any Action registered

Kireck17•4mo ago

For example

Kireck17•4mo ago

Clement•4mo ago

Why do I need actions ? Need to add it directly my select component ?

Kireck17•4mo ago

cause i need a custom modal with a table U use a panel or Form builder?

Clement•4mo ago

Yes my form is rendered here (it's my select multiple and my button on it)

Clement•4mo ago

After at the bottom of my html form I load my Table builder in another livewire component where I have this in the components:

Clement•4mo ago

Also my form is rendered like this

Kireck17•4mo ago

ah ok. I used filament v2 but i'm starting with filament v3

Clement•4mo ago

Yes I am using filament v3 the event and refresh is working well also just the select is always active state even when I enter in the modal it's already active. I don't have to click on it

Kireck17•4mo ago

Thank you for our time dude.

Gaming

Programming

Select Multiple always active