Select then show Modal

Hi, I have a select component and has 2 options. How can I add a modal when I've selected one of those in options? like

requireConfirmation

requireConfirmation

11 Replies

LeandroFerreira•8mo ago

something like that?

Select::make('select')
    ->options([
        'option1' => 'Option 1',
        'option2' => 'Option 2',
    ])
    ->hintAction(
        Forms\Components\Actions\Action::make('customAction')
            ->requiresConfirmation()
            ->action(function() {
                
            })
    )
->live()
->afterStateUpdated(function(?string $state, Component $livewire) {
    if($state === 'option2') {
        $livewire->mountFormComponentAction('data.select', 'customAction');
    }
})

Select::make('select')
    ->options([
        'option1' => 'Option 1',
        'option2' => 'Option 2',
    ])
    ->hintAction(
        Forms\Components\Actions\Action::make('customAction')
            ->requiresConfirmation()
            ->action(function() {
                
            })
    )
->live()
->afterStateUpdated(function(?string $state, Component $livewire) {
    if($state === 'option2') {
        $livewire->mountFormComponentAction('data.select', 'customAction');
    }
})

lazydogOP•8mo ago

Thanks @Leandro Ferreira for your quick response, something like this but I want to appear a modal (confirmation) once Ive selected an item. And that modal should be appeared once state is updated. Something like this. My purpose is, once the user select a new item from option, all related data not belongs to the current selected item will be deleted. I just want some confirmation before deletion.

->afterStateUpdated(function(?string $state, Component $livewire) {
    Action::make('delete')
    ->action(fn (Post $record) => $record->delete())
    ->requiresConfirmation()
})

->afterStateUpdated(function(?string $state, Component $livewire) {
    Action::make('delete')
    ->action(fn (Post $record) => $record->delete())
    ->requiresConfirmation()
})