Replace `js` directive with `json` directive in order to fix sidebars

[morloderex]

Description

In filament 3.2.119 a fix was released which attempted to fix the side collapsing issue that has been introduced due to JS::make(collect()) returning 'null' instead of 'JSON.parse('[]')'. That attempt didn't work for me so i have updated it to instead use the @json directive as that seems to do the trick instead.

This works because the generated output will be

<?php echo json_encode(collect($navigation)
                            ->filter(fn (\Filament\Navigation\NavigationGroup $group): bool => $group->isCollapsed())
                            ->map(fn (\Filament\Navigation\NavigationGroup $group): string => $group->getLabel())
                            ->values()
                            ->all()
                        , 15, 512) ?>

instead of

<?php echo \Illuminate\Support\Js::from(collect($navigation)
                            ->filter(fn (\Filament\Navigation\NavigationGroup $group): bool => $group->isCollapsed())
                            ->map(fn (\Filament\Navigation\NavigationGroup $group): string => $group->getLabel())
                            ->values()
                            ->all()
                        )->toHtml() ?>

The Js::from([])->toHtml() produces 'null' as output when it should be JSON.parse('[]') which is the issue.

Visual changes

Collapsing sidebars are possible once more!

Functional changes

• [x] Code style has been fixed by running the composer cs command.
• [x] Changes have been tested to not break existing functionality.
• [x] Documentation is up-to-date.

[danharrin]

The issue originated in Laravel, our release was a small remedy for those who didn't upgrade yet. We cannot merge this as the @json directive does not escape special characters in the same way as @js, so it would break certain collapsed group labels.

Please try clearing your local storage after upgrading Laravel, it should fix the problem.

[boralp]

The issue already closed but somehow if anyone needs a quick fix here is what I came up with.

/resources/js/collapsedGroups.fix.js

(function(){
  let cg = localStorage.getItem('collapsedGroups');
  if (cg === null || cg == '' || cg == 'null' || cg == undefined) {
    localStorage.setItem('collapsedGroups', '[]');
    location.reload();
  }
})();

Add it to your panel

public function panel(Panel $panel): Panel
{
    return $panel
        ->assets([
                 \Filament\Support\Assets\Js::make('collapsedGroups.fix', resource_path('js/collapsedGroups.fix.js')),
         ]);
}

[danharrin]

@boralp are you still experiencing the issue even after upgrading Filament to the latest version and clearing your local storage?