F
Filament•7d ago
SH0_T

Toggleable colomn fails after making it visible again

I have some code that hides and unhides colomns because I have a inline edit mode. Yet when I have switched from Display mode to Edit mode, it shows the toggelable colomns from the dipslay mode instead of the edit mode. When I switch back to Display mode I see the toggleable colomns from Edit mode, so it is always a state behind, whenever I refresh or when I simpely search something in the searchbar or whatever update event I do, it fixes the toggelables: 
return $table
            ->columns([
                //Display mode:
                TextColumn::make('name-readonly')
                    ->label('Name')
                    ->getStateUsing(fn($record) => $record->name)
                    ->searchable(query: fn($query, $search) => $query->where('name', 'like', "%$search%"))
                    ->sortable(query: fn($query, $direction) => $query->orderBy('name', $direction))
                    ->toggleable()
                    ->hidden(fn($livewire) => property_exists($livewire, 'isEditMode') && $livewire->isEditMode),
                TextColumn::make('created_at')....
                TextColumn::make('updated_at')....

                //Edit mode:
                TextInputColumn::make('name')
                    ->label('Name')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->placeholder('Enter the name of the application')
                    ->rules(['required', 'max:255', 'unique:applications,name'])
                    ->hidden(fn($livewire) => property_exists($livewire, 'isEditMode') && !$livewire->isEditMode),
            ])
return $table
            ->columns([
                //Display mode:
                TextColumn::make('name-readonly')
                    ->label('Name')
                    ->getStateUsing(fn($record) => $record->name)
                    ->searchable(query: fn($query, $search) => $query->where('name', 'like', "%$search%"))
                    ->sortable(query: fn($query, $direction) => $query->orderBy('name', $direction))
                    ->toggleable()
                    ->hidden(fn($livewire) => property_exists($livewire, 'isEditMode') && $livewire->isEditMode),
                TextColumn::make('created_at')....
                TextColumn::make('updated_at')....

                //Edit mode:
                TextInputColumn::make('name')
                    ->label('Name')
                    ->searchable()
                    ->sortable()
                    ->toggleable()
                    ->placeholder('Enter the name of the application')
                    ->rules(['required', 'max:255', 'unique:applications,name'])
                    ->hidden(fn($livewire) => property_exists($livewire, 'isEditMode') && !$livewire->isEditMode),
            ])
No description
10 Replies
SH0_T
SH0_TOP•7d ago
No description
No description
No description
SH0_T
SH0_TOP•6d ago
First load it is correct, but after switching it messes it up and will always be one "state" behind 1st screenshot is initial state 2nd screenshot is edit mode with display mode toggelables 3th screenshot is display mode again with edit mode toggelables 
<?php

namespace App\Filament\Resources\ApplicationResource\Pages;

use App\Filament\Resources\ApplicationResource;
use Filament\Actions\Action;
use Filament\Actions\CreateAction;
use Filament\Resources\Pages\ListRecords;

class ListApplications extends ListRecords
{
    protected static string $resource = ApplicationResource::class;

    public bool $isEditMode = false;

    protected function getHeaderActions(): array
    {
        return [
            Action::make('toggleEdit')
                ->label(fn() => $this->isEditMode ? 'To Display Mode' : 'To Edit Mode')
                ->action('toggleEditMode')
                ->color('secondary'),
            CreateAction::make(),
        ];
    }

    public function toggleEditMode(): void
    {
        $this->isEditMode = !$this->isEditMode;
    }
}
<?php

namespace App\Filament\Resources\ApplicationResource\Pages;

use App\Filament\Resources\ApplicationResource;
use Filament\Actions\Action;
use Filament\Actions\CreateAction;
use Filament\Resources\Pages\ListRecords;

class ListApplications extends ListRecords
{
    protected static string $resource = ApplicationResource::class;

    public bool $isEditMode = false;

    protected function getHeaderActions(): array
    {
        return [
            Action::make('toggleEdit')
                ->label(fn() => $this->isEditMode ? 'To Display Mode' : 'To Edit Mode')
                ->action('toggleEditMode')
                ->color('secondary'),
            CreateAction::make(),
        ];
    }

    public function toggleEditMode(): void
    {
        $this->isEditMode = !$this->isEditMode;
    }
}
Does someone know how to fix this issue?
toeknee
toeknee•6d ago
Nope... not quite following here, you say it's always a state behind? But your screenshots shot it right?
SH0_T
SH0_TOP•6d ago
Only the first screenshot is right, (the state it is when i load the page for the first time, i can make more clear screenshots tomorrow
SH0_T
SH0_TOP•5d ago
Alright so: First of when I visit the page applications i get this: You can see the 3 columns named Name, Created At and Updated At This is display the display mode because you cant inline edit
No description
SH0_T
SH0_TOP•5d ago
This is the edit mode: You can inline edit all the lines, i have renamed name to example for only the inline edit mode so can can clearly see what i mean with previous state in the toggelables Note: I have added toggleable for the example column in next screenshots, its it currently off because of the bug and forgot to change it before making this screenshot
No description
SH0_T
SH0_TOP•5d ago
So back again, i have refreshed my page, first time visiting the application page. You can see i have the toggleables Name, created at and updated at, which is correct
No description
SH0_T
SH0_TOP•5d ago
Now when activating the edit mode, when looking at the toggleable options, I still see name, created at, updated at, while there should be only Example
No description
SH0_T
SH0_TOP•5d ago
Finally, when going back to display mode it only shows example, while name, created at and updated at should be visible --- Thats why I call it "always one state behind" because you can see the toggleables from before switching the mode
No description
toeknee
toeknee•5d ago
Right got you, the toggleables is going to be behind in that scenario because it's handled on boot. Toggleable normally would never change the columns are related to the data. I would usually recommend a separate list page for editing which could render differnet able parameters. Maybe on the dit mode, instead of toggling to refresh the data do a page redirect with a query string to enable edit mode which will cause 1 redirect, but ensure everything lines up correctly?

Did you find this page helpful?