F
Filament•3mo ago
ashtrath

[V4] Select component not rerendering when `multiple` values changes

Hey guys, im currently making a Select field that can accept multiple values if the selected user role have specific permission. The issue is the component doesn't re-render when the selected role value changed. Here's my implementation: 
Select::make('roles')
    ->label('Role')
    ->relationship('roles', 'name')
    ->searchable()
    ->preload()
    ->required()
    ->columnSpanFull()
    ->dehydrated(false)
    ->saveRelationshipsUsing(function (User $record, array $state): void {
        $record->roles()->sync($state);
    })
    ->live(),

Select::make('sekolahs')
    ->hiddenLabel()
    ->relationship('sekolahs', 'nama')
    ->preload()
    ->native(false)
    ->multiple(function (Get $get): bool {
        return Role::findById($get('roles')[0])->hasPermissionTo('manage_multiple_sekolahs::sekolah');
    })
    ->required(),
Select::make('roles')
    ->label('Role')
    ->relationship('roles', 'name')
    ->searchable()
    ->preload()
    ->required()
    ->columnSpanFull()
    ->dehydrated(false)
    ->saveRelationshipsUsing(function (User $record, array $state): void {
        $record->roles()->sync($state);
    })
    ->live(),

Select::make('sekolahs')
    ->hiddenLabel()
    ->relationship('sekolahs', 'nama')
    ->preload()
    ->native(false)
    ->multiple(function (Get $get): bool {
        return Role::findById($get('roles')[0])->hasPermissionTo('manage_multiple_sekolahs::sekolah');
    })
    ->required(),
Solution:
Found a workaround to avoid this issue. I just need to change the field's key to force the component to re-render at cost of need to do the permissions checking on layouts schema level ```php Section::make('Sekolah yang Diawasi') ->icon(Heroicon::AcademicCap)...
Jump to solution
2 Replies
ashtrath
ashtrathOP•3mo ago
So for example I have two roles which is Role A and Role B. - Role A have manage_multiple permission - Role B doesn't have the permission When I select the Role A the sekolah field will accept multiple value, but when I change back to Role B the sekolah field will stuck in multiple state which are not what I wanted this also happen in reverse, if I select Role B first, the target field will only accept one options, but when changing back to Role A it'll stuck on that single state this "stuck" state issue also happens when applying the logic to maxItems function I'm not sure which part that are wrong, I'm assuming it's filament's internal bug or smth
Solution
ashtrath
ashtrath•3mo ago
Found a workaround to avoid this issue. I just need to change the field's key to force the component to re-render at cost of need to do the permissions checking on layouts schema level 
Section::make('Sekolah yang Diawasi')
    ->icon(Heroicon::AcademicCap)
    ->description('Pilih satu atau lebih sekolah yang menjadi tanggung jawab pengguna ini.')
    ->visible(function (Get $get): bool {
        $roles = $get('roles');
        if (!filled($roles)) {
            return false;
        }

        return Role::findById($roles[0])->hasPermissionTo('manage_sekolahs::sekolah');
    })
    ->components(function (Get $get): array {
        $roles = $get('roles');
        if (!filled($roles)) {
            return [];
        }

        $multiple = Role::findById($roles[0])->hasPermissionTo('manage_multiple_sekolahs::sekolah');
        return [
            Select::make('sekolahs')
                ->key(fn(): string => $multiple ? 'sekolah_multiple' : 'sekolah')
                ->hiddenLabel()
                ->relationship('sekolahs', 'nama')
                ->preload()
                ->native(false)
                ->multiple($multiple)
                ->required(),
        ];
    }),
Section::make('Sekolah yang Diawasi')
    ->icon(Heroicon::AcademicCap)
    ->description('Pilih satu atau lebih sekolah yang menjadi tanggung jawab pengguna ini.')
    ->visible(function (Get $get): bool {
        $roles = $get('roles');
        if (!filled($roles)) {
            return false;
        }

        return Role::findById($roles[0])->hasPermissionTo('manage_sekolahs::sekolah');
    })
    ->components(function (Get $get): array {
        $roles = $get('roles');
        if (!filled($roles)) {
            return [];
        }

        $multiple = Role::findById($roles[0])->hasPermissionTo('manage_multiple_sekolahs::sekolah');
        return [
            Select::make('sekolahs')
                ->key(fn(): string => $multiple ? 'sekolah_multiple' : 'sekolah')
                ->hiddenLabel()
                ->relationship('sekolahs', 'nama')
                ->preload()
                ->native(false)
                ->multiple($multiple)
                ->required(),
        ];
    }),

Did you find this page helpful?