F
Filament•4mo ago
frame

Filament v4 preventing Wizard submit on enter

https://github.com/filamentphp/filament/issues/13779 I want to see if I can create a Wizard that does not submit when the user hits enter on any step. Did anyone figure it out? What should I add or change in my wizard? Right now hitting enter on the first step tries to call create. 
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Pages\Page;
use Filament\Schemas\Components\Wizard;
use Filament\Schemas\Components\Wizard\Step;
use Filament\Schemas\Schema;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;

class WizardPage extends Page
{
    use InteractsWithForms;

    protected string $view = 'filament.pages.wizard-page';

    public string $name = '';

    public string $email = '';

    public function form(Schema $schema): Schema
    {
        return $schema
            ->schema([
                Wizard::make([
                    Step::make('First step')
                        ->schema([
                            TextInput::make('name'),
                        ]),
                    Step::make('Second step')
                        ->schema([
                            TextInput::make('email')
                                ->required(),
                        ]),
                ])->submitAction(new HtmlString(Blade::render(<<<'BLADE'
                    <x-filament::button
                        type="submit"
                        size="sm"
                    >
                        Submit
                    </x-filament::button>
                BLADE)))]);
    }
}
<?php

namespace App\Filament\Pages;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Pages\Page;
use Filament\Schemas\Components\Wizard;
use Filament\Schemas\Components\Wizard\Step;
use Filament\Schemas\Schema;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;

class WizardPage extends Page
{
    use InteractsWithForms;

    protected string $view = 'filament.pages.wizard-page';

    public string $name = '';

    public string $email = '';

    public function form(Schema $schema): Schema
    {
        return $schema
            ->schema([
                Wizard::make([
                    Step::make('First step')
                        ->schema([
                            TextInput::make('name'),
                        ]),
                    Step::make('Second step')
                        ->schema([
                            TextInput::make('email')
                                ->required(),
                        ]),
                ])->submitAction(new HtmlString(Blade::render(<<<'BLADE'
                    <x-filament::button
                        type="submit"
                        size="sm"
                    >
                        Submit
                    </x-filament::button>
                BLADE)))]);
    }
}
<x-filament-panels::page>
    <form wire:submit="create">
        {{ $this->form }}
    </form>
</x-filament-panels::page>
<x-filament-panels::page>
    <form wire:submit="create">
        {{ $this->form }}
    </form>
</x-filament-panels::page>
Solution:
Think I got it, it only works when using HasWizard, not with Components\Wizard https://filamentphp.com/docs/4.x/resources/creating-records#using-a-wizard
Creating records - Resources - Filament
Jump to solution
2 Replies
frame
frameOP•2mo ago
https://github.com/filamentphp/filament/pull/15658 Did anyone figure out how to use these individual forms for wizard steps? I am quite bad at reading source code 🙈
GitHub
Allow wizards to nest forms so that each step is submitted individu...
Closes #13779.
Solution
frame
frame•2mo ago
Think I got it, it only works when using HasWizard, not with Components\Wizard https://filamentphp.com/docs/4.x/resources/creating-records#using-a-wizard
Creating records - Resources - Filament

Did you find this page helpful?