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

create

create

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

<?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>

<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

Filament v4 preventing Wizard submit on enter

Similar Threads

Similar Threads

Similar Threads