[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
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(),
];
}),