Filament•2mo ago

element.requestFullscreen() inside a Filament modal

Hello, i want to requestFullscreen an element inside a filament modal, but it closes the modal automatically. Any idea on how to fix that ? My action :

Tables\Actions\Action::make('view')
    ->label(__('View'))
    ->icon('heroicon-o-eye')
    ->color('info')
    ->modalHeading(fn($record) => __('Scan') . ' - ' . $record->done_at->translatedFormat('d F Y, H:i'))
    ->infolist([
        Infolists\Components\ViewEntry::make('path')->view('filament.infolists.entries.scan-viewer')
    ])
    ->modalSubmitAction(false)
    ->modalCancelAction(false),

Tables\Actions\Action::make('view')
    ->label(__('View'))
    ->icon('heroicon-o-eye')
    ->color('info')
    ->modalHeading(fn($record) => __('Scan') . ' - ' . $record->done_at->translatedFormat('d F Y, H:i'))
    ->infolist([
        Infolists\Components\ViewEntry::make('path')->view('filament.infolists.entries.scan-viewer')
    ])
    ->modalSubmitAction(false)
    ->modalCancelAction(false),

The view :

<div x-data="{
    toggleFullscreen() {
        this.$refs.test.requestFullscreen();
    }
}">
    <h1>Testing</h1>

    <button @click="toggleFullscreen">Go Fullscreen</button>

    <div x-ref="test" class="h-96 w-96 bg-red-400">
        - my fullscreen element
    </div>
</div>

<div x-data="{
    toggleFullscreen() {
        this.$refs.test.requestFullscreen();
    }
}">
    <h1>Testing</h1>

    <button @click="toggleFullscreen">Go Fullscreen</button>

    <div x-ref="test" class="h-96 w-96 bg-red-400">
        - my fullscreen element
    </div>
</div>

Solution:

Update : problem solved ! If anyone come across this, i just added type="button" to my buttons... 😅

Jump to solution

1 Reply

Solution

Maxime•2mo ago

Update : problem solved ! If anyone come across this, i just added type="button" to my buttons... 😅

Gaming

Programming

element.requestFullscreen() inside a Filament modal