FilamentF
Filament•3y ago
Mark Chaney

Wizard Steps and Javascript

Probably more a livewire question, but Im using Adams table repeater and wanting to do some row highlighting, so I am doing 
Radio::make('move_or_merge')
    ->inline()
    ->options([
        'merge' => 'Merge',
    ])
    ->extraAttributes([
        'x-data' => '{}',
        'x-init' => 'function () {
            const applyStyle = () => {
                $el.closest("tr").style.backgroundColor = "#f0fdf4";
            };

            applyStyle(); // Apply style on init

            // Listen for Livewire update and re-apply the style
            this.$watch("move_or_merge", (value) => {
                if(value === "merge") {
                    applyStyle();
                }
            });

            // This is a Livewire hook that listens for when Livewire finishes a component update
            Livewire.hook("element.updated", (el, component) => {
                if(component.id === @this.id && el.hasAttribute("x-on:click")) {
                    applyStyle();
                }
            });
        }',
        'x-on:click' => 'applyStyle',
    ])
    ->required()
    ->hiddenLabel(),
, which works great for the first step, and clickable works on all steps of the wizard. I have two problems though. Its highlight state is lost if there is a validation fail on the form and any additional steps, the init state doesnt seem to apply. Any suggestions? Its a pretty long form and this highlighting really helps seeing which items still need action take before getting to the validation point. Its not a show stopper, but would love to figure this out.
Was this page helpful?