#Inconsistent Logo Size and Unreliable Button Labels in the Registration Wizard

2 messages · Page 1 of 1 (latest)

untold tendon
#

Two issues are encountered while implementing a registration wizard with FilamentPHP:

  1. Logo Size Changes Unexpectedly:

    • The logo is designed to be displayed prominently on specific routes (e.g., login, registration, two-factor authentication).
    • During the wizard, especially when interacting with dropdown menus, the logo unexpectedly shrinks to its default size.
  2. Unreliable Button Labels:

    • The "Next" and "Back" buttons in the wizard are dynamically labeled to indicate the next or previous step.
    • At times, the labels fall back to their default values, indicating synchronization issues or state management problems.
  • Logo Height Logic:
    ->brandLogoHeight(function () {
        if (in_array(Route::getCurrentRoute()
                ->getName(), [
                'filament.member.auth.login',
                'filament.member.auth.register',
                'filament.member.two-factor.setup',
                'filament.member.two-factor.recovery',
                'filament.member.two-factor.challenge',
            ]) === true) {
            return 'auto';
        }
        return null;
    })
    
    • This logic may not account for dynamic state changes during the wizard.

Button Label Logic:

->nextAction(function (Action $action, Wizard $wizard) {
    $currentStepIndex = $wizard->getCurrentStepIndex(); // Current step
    $steps = $wizard->getChildComponents(); // All wizard steps

    // Check if the next step exists
    if (array_key_exists($currentStepIndex + 1, $steps)) {
        $nextStepLabel = $steps[$currentStepIndex + 1]->getLabel(); // Label of the next step
        return $action->label(__('forms.buttons.nextTo', ['name' => $nextStepLabel])); // Set translated label
    }

    return $action->label(__('forms.buttons.next')); // Fallback to a general "Next" label
})
->previousAction(function (Action $action, Wizard $wizard) {
    $currentStepIndex = $wizard->getCurrentStepIndex(); // Current step
    $steps = $wizard->getChildComponents(); // All wizard steps

    // Check if the previous step exists
    if (array_key_exists($currentStepIndex - 1, $steps)) {
        $previousStepLabel = $steps[$currentStepIndex - 1]->getLabel(); // Label of the previous step
        return $action->label(__('forms.buttons.backTo', ['name' => $previousStepLabel])); // Set translated label
    }

    return $action->label(__('forms.buttons.back')); // Fallback to a general "Back" label
})
  • The dynamic button labels are set using the wizard's getCurrentStepIndex() method. However, Livewire's state synchronization appears to be inconsistent, causing a fallback to default labels.
modern oakBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution