Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reorder button always hidden when using tabs #14371

Open
IlliaVeremiev opened this issue Sep 27, 2024 · 2 comments
Open

Reorder button always hidden when using tabs #14371

IlliaVeremiev opened this issue Sep 27, 2024 · 2 comments
Labels

Comments

@IlliaVeremiev
Copy link

IlliaVeremiev commented Sep 27, 2024

Package

filament/filament

Package Version

v3.2.106

Laravel Version

v11.21.0

Livewire Version

v3.5.6

PHP Version

PHP 8.2.12

Problem description

Have Filament Resource with ListRecords page.
On ListRecords page, getTabs method is implemented (With All and Some tabs)
Table defined as reorderable with condition, that All tab is not reorderable.

class MenuItemResource extends Resource
{
    // $model, $navigationIcon, ...

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'),
            ])
            ->reorderable('order', fn (Page $livewire) => $livewire->activeTab !== 'all');
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListMenuItems::route('/'),
        ];
    }
}

class ListMenuItems extends ListRecords
{
    protected static string $resource = MenuItemResource::class;

    public function getTabs(): array
    {
        return [
            'all' => Tab::make(),
            'some' => Tab::make(),
        ];
    }
}

When open dashboard and navigate to resource page, reorder button is hidden, when navigate Some tab, it is still hidden.
If refresh the page on Some tab, it works as expected. The problem happens only if navigated to the Resource page from another page (Dashboard or other Resources).

Expected behavior

When navigate All tab, reorder button should be hidden. When navigate Some tab, reorder button should be displayed

Steps to reproduce

  1. Navigate Dashboard page
  2. Navigate Resource page with several tabs and reorderable condition to be hidden on the first tab
  3. Navigate tab where reorderable should be displayed

This seems to be happening because the header toolbar container has the display: none style. Even though the button tends to be rendered.

As a temporary workaround I created custom action button, that calls toggleTableReordering

Reproduction repository (issue will be closed if this is not valid)

https://github.com/IlliaVeremiev/filament-reorderable-with-tabs-issue

Relevant log output

No response

Donate 💰 to fund this issue

  • You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
  • 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
  • Thank you in advance for helping us make maintenance sustainable!
Fund with Polar
@leandrocfe
Copy link
Contributor

I believe the issue occurs because the table header is hidden when the page initially loads, as there are no items to display. A simple solution would be to make one of the table columns searchable which would force the table header/toolbar to appear:

TextColumn::make('name')
    ->searchable()

@IlliaVeremiev
Copy link
Author

@leandrocfe, it works! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Todo
Development

No branches or pull requests

2 participants