Wizard Step after step 2 gets `overflow-hidden` class on expanded collapsible container

[matthewnessworthy]

Package

filament/filament

Package Version

v3.2.72

Laravel Version

v3.2.72

Livewire Version

v3.4.11

PHP Version

PHP 8.2.18

Problem description

When going past step 2 (i.e., step 3+) on a Wizard that is collapsible, the container gets the collapsed classes (fi-collapsed overflow-hidden) even though the container is open and no collapse action was triggered by the user

The issue with this is any container JS dropdowns get hidden/cut by the container.

Here's a quick look at the classes that get added from step 3+ https://github.com/filamentphp/filament/assets/5653887/fc5e28cb-4a82-455a-8fc9-74552d563e49

Expected behavior

The container should not have overflow-hidden while it is open.

Steps to reproduce

Setup the project

composer install
npm install
npm run build

Start the webserver

php artisan serve

Go to the Page resource page http://127.0.0.1:8000/admin/pages/create

Click Add to content blocks

Select the radio button Widgets and click Next Select the radio button Select + Checkboxes + Text and click Next

Inspect the wizard step <li> classes

it will have something like this:

fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10 fi-collapsed overflow-hidden

but it should be like this

fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10

Reproduction repository

https://github.com/matthewnessworthy/filamentphp-wizard-bug

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!

[sebapastore]

Hi @matthewnessworthy,

Could you please update the reproduction repository to match the video? The current repository only has two steps in the Wizard. I added a "Group Step" to mimic the video, but I am still unable to reproduce the bug.

Thank you!

[matthewnessworthy]

@sebapastore sorry about that, repo is updated now

[sebapastore]

Thank you! I am able to reproduce the bug now.

It appears the issue is related to the collapsed() method on the Block component. The block is supposed to be collapsed by default, but it isn't. If you set collapsed(false), it works fine.

Therefore, it seems the issue is not in Step 3, but in Step 1. I will continue investigating this later.