Filament•13mo ago

afterStateUpdated() not running on custom component

I have custom Section component that is opened and collapsed using a checkbox. It works as expected. I have multiple CheckboxSection components in my form and want to ensure that only 1 is open at a given time. Maybe i could achieve this by doing some checks in the afterStateUpdated() method on each checkbox? The Problem - afterStateUpdated() doesnt seem to run on the checkboxes. On the example code below the $state is not dumped.

CheckboxSection::make('single')
  ->checkbox(
                Forms\Components\Checkbox::make('is_single')
                    ->label('Single Packaging')
                    ->live()
                    ->disabled(fn ($livewire): bool => ! $livewire->hasSinglePackagingOptions())
                    ->afterStateUpdated(fn ($state) => dump($state))
                    ->extraAttributes(function ($livewire, ?bool $state) {
                        if ($livewire->hasSinglePackagingOptions() && $state) {
                            return ['x-on:click' => "isCollapsed = true"];
                        }
                        if ($livewire->hasSinglePackagingOptions()) {
                            return ['x-on:click' => "isCollapsed = false"];
                        }
                        return [];
                    })
->description(fn (Get $get, $livewire): ?string => $get('limitation') ? ($livewire->hasSinglePackagingOptions() ? 'Permitted' : 'Not Permitted') : null)
            ->compact()
            ->collapsible() 
            ->collapsed(function (Get $get) {
                // code
            })
            ->schema([
                // code
            ])

CheckboxSection::make('single')
  ->checkbox(
                Forms\Components\Checkbox::make('is_single')
                    ->label('Single Packaging')
                    ->live()
                    ->disabled(fn ($livewire): bool => ! $livewire->hasSinglePackagingOptions())
                    ->afterStateUpdated(fn ($state) => dump($state))
                    ->extraAttributes(function ($livewire, ?bool $state) {
                        if ($livewire->hasSinglePackagingOptions() && $state) {
                            return ['x-on:click' => "isCollapsed = true"];
                        }
                        if ($livewire->hasSinglePackagingOptions()) {
                            return ['x-on:click' => "isCollapsed = false"];
                        }
                        return [];
                    })
->description(fn (Get $get, $livewire): ?string => $get('limitation') ? ($livewire->hasSinglePackagingOptions() ? 'Permitted' : 'Not Permitted') : null)
            ->compact()
            ->collapsible() 
            ->collapsed(function (Get $get) {
                // code
            })
            ->schema([
                // code
            ])

3 Replies

ConsignrOP•13mo ago

The component class is basically just the default section component with 3 extra methods for the checkbox.

/**
     * @param  Component | Closure  $component
     */
    public function checkbox(Component | Closure $component): static
    {
        $this->checkboxComponent = $component;

        return $this;
    }

    /**
     * @return Component
     */
    public function getCheckboxComponent()
    {
        return $this->evaluate($this->checkboxComponent);
    }

    /**
     * @return Component
     */
    public function getCheckboxComponentContainer(): ComponentContainer
    {
        return ComponentContainer::make($this->getLivewire())
            ->parentComponent($this)
            ->components([$this->getCheckboxComponent()]);
    }

/**
     * @param  Component | Closure  $component
     */
    public function checkbox(Component | Closure $component): static
    {
        $this->checkboxComponent = $component;

        return $this;
    }

    /**
     * @return Component
     */
    public function getCheckboxComponent()
    {
        return $this->evaluate($this->checkboxComponent);
    }

    /**
     * @return Component
     */
    public function getCheckboxComponentContainer(): ComponentContainer
    {
        return ComponentContainer::make($this->getLivewire())
            ->parentComponent($this)
            ->components([$this->getCheckboxComponent()]);
    }

The checkbox is rendered in the view

{{ $getCheckboxComponentContainer() }}

{{ $getCheckboxComponentContainer() }}

The CheckboxSection components work as expected except for the afterStateUpdated method on the checkbox. https://www.awesomescreenshot.com/video/22464078?key=51b79342d2ce9e5703bced135c554ca2 Any guidance would be really appreciated😬

Timster8989•13mo ago

Hi! Did you find any solution to this?

ConsignrOP•13mo ago

Hi, not yet...hopefully take another look at the weekend. Maybe there is a better approach to achieve an accordian style component...idk?

Gaming

Programming

afterStateUpdated() not running on custom component