F
Filament•4w ago
informatJonas

Inconsistent Logo Size and Unreliable Button Labels in the Registration Wizard

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;
  })
  
  ->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
  })
  
  ->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.
1 Reply
informatJonas
informatJonasOP•3w ago
Does nobody have any idea why Livewire/Filament sometimes sets this to the default value, but then again sometimes it works?

Did you find this page helpful?