Wizard with skippable steps and required (invalid) email field causing unfinishable steps

dissto commented 1 year ago

Package

filament/filament

Package Version

v2

Laravel Version

v10.10

Livewire Version

v2

PHP Version

PHP 8.1.0

Problem description

If you have a wizard with skippable steps and have an email field in any of the previous steps (required and email type) and you skip a step and submit the form, you will not be able to proceed, nor will you get any validation errors or any other default behavior.

The console in chrome throws the following error:

An invalid form control with name='' is not focusable. 

<input x-data="{}" wire:model.defer="data.email" type="email" dusk="filament.forms.data.email" id="data.email" class="filament-forms-input block w-full rounded-lg shadow-sm outline-none transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 border-gray-300 focus:border-primary-500 focus:ring-primary-500" x-bind:class="{
                    'border-gray-300 focus:border-primary-500 focus:ring-primary-500': ! (
                        'data.email' in $wire.__instance.serverMemo.errors
                    ),
                    'dark:border-gray-600 dark:focus:border-primary-500':
                        ! ('data.email' in $wire.__instance.serverMemo.errors) && false,
                    'border-danger-600 ring-danger-600 focus:border-danger-500 focus:ring-danger-500':
                        'data.email' in $wire.__instance.serverMemo.errors,
                    'dark:border-danger-400 dark:ring-danger-400 dark:focus:border-danger-500 dark:focus:ring-danger-500':
                        'data.email' in $wire.__instance.serverMemo.errors && false,
                }">

https://github.com/filamentphp/filament/assets/11778632/02fe03ef-990d-4b18-88e9-856ec7f591a1

Expected behavior

To either show the browser client-side validation error or the validation error messages, while focusing the field in question.

Steps to reproduce

Create a wizard with at least 2 steps
Have an required email field in one step
Enter an invalid email address
Open developer console
Skip this step and fill out the remaining fields in the last step and hit create
```
<?php
```

namespace App\Filament\Resources\UserResource\Pages;

use App\Filament\Resources\UserResource; use Filament\Forms\Components\TextInput; use Filament\Forms\Components\Wizard\Step; use Filament\Pages\Actions; use Filament\Resources\Pages\CreateRecord;

class CreateUser extends CreateRecord { use CreateRecord\Concerns\HasWizard;

protected static string $resource = UserResource::class;

public function hasSkippableSteps(): bool
{
    return true;
}

protected function getSteps(): array
{
    return [
        Step::make('step-1')
            ->schema([
                TextInput::make('email')
                    ->email()
                    ->required(),
            ]),

        Step::make('step-2')
            ->schema([
                TextInput::make('name'),
            ]),
    ];
}

}


### Reproduction repository

https://github.com/dissto/filament-wizzard

### Relevant log output

```shell
An invalid form control with name='' is not focusable. <input x-data="{}" wire:model.defer="data.email" type="email" dusk="filament.forms.data.email" id="data.email" class="filament-forms-input block w-full rounded-lg shadow-sm outline-none transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 border-gray-300 focus:border-primary-500 focus:ring-primary-500" x-bind:class="{
                    'border-gray-300 focus:border-primary-500 focus:ring-primary-500': ! (
                        'data.email' in $wire.__instance.serverMemo.errors
                    ),
                    'dark:border-gray-600 dark:focus:border-primary-500':
                        ! ('data.email' in $wire.__instance.serverMemo.errors) && false,
                    'border-danger-600 ring-danger-600 focus:border-danger-500 focus:ring-danger-500':
                        'data.email' in $wire.__instance.serverMemo.errors,
                    'dark:border-danger-400 dark:ring-danger-400 dark:focus:border-danger-500 dark:focus:ring-danger-500':
                        'data.email' in $wire.__instance.serverMemo.errors && false,
                }">

danharrin commented 1 year ago

A note to whoever deals with this: $isConcealed should be true for inputs inside a wizard

danharrin commented 1 year ago

Looked into this. Unfortunately, the only way to fix it is to remove the type="email", which would then kill accessibility and usability on mobile (email-based keyboard). As such, and since this doesn't actually affect functionality, it's just a harmless console error, I am going to close this.

mokhosh commented 2 months ago

@danharrin Just a note, this is not just a console error. The user will actually get stuck not knowing what the issue is. The OP has only showed the console error to make it visible.

This sometimes happens with upcoming steps as well.

filamentphp / filament