Builder bug with addActionBetween

[awcodes]

Package

filament/filament

Package Version

v3.2.40

Laravel Version

v11.7.0

Livewire Version

v3.4.12

PHP Version

PHP 8.2.8

Problem description

When adding items with the addBetweenAction once there are 4-5 items in the state the last item looses its alpine data somehow resulting in alpine throwing up in the console because ‘isCollapsed’ is undefined.

But then it reinitializes itself. But continues to not have the alpine data set on any following actions.

So if you click on collapse all they all collapse except that one. But the bug still happens regardless of collapsible or not. addAction doesn’t seem to trigger the issue, probably because the new item is always at the end of the state array.

Expected behavior

Blocks do not loose their alpine x-data properties.

Steps to reproduce

https://github.com/filamentphp/filament/assets/3596800/1d114bbf-035b-4fe7-907f-b338a3157a64

Reproduction repository

https://github.com/awcodes/builder-bug

Relevant log output

Alpine Expression Error: isCollapsed is not defined

Expression: "{ 'fi-collapsed overflow-hidden': isCollapsed }"

 
<li class="fi-fo-builder-item round…te/5 dark:ring-white/10" wire:key="PbiK2x6DQxx8eyCmZdri.dat…omponents\\Builder.item" x-data="{\n                     …                      }" x-init="() => console.log(`init …0b7-85aa-a6cee2bf0343`)" x-on:builder-expand.window="$event.detail === 'data.…& (isCollapsed = false)" x-on:builder-collapse.window="$event.detail === 'data.…&& (isCollapsed = true)" x-on:expand="isCollapsed = false" x-sortable-item="f2c27680-717b-40b7-85aa-a6cee2bf0343" x-bind:class="{ 'fi-collapsed overflow-hidden': isCollapsed }" data-has-alpine-state="true">
livewire.js:1123:13
Alpine Expression Error: isCollapsed is not defined

Expression: "{ '-rotate-180': isCollapsed }"

 
<li class="relative transition" x-on:click.stop="isCollapsed = !isCollapsed" x-bind:class="{ '-rotate-180': isCollapsed }">
livewire.js:1123:13
Alpine Expression Error: isCollapsed is not defined

Expression: "{ 'opacity-0 pointer-events-none': isCollapsed }"

 
<div class="transition" x-bind:class="{ 'opacity-0 pointer-events-none': isCollapsed }">
livewire.js:1123:13
Alpine Expression Error: isCollapsed is not defined

Expression: "{ 'opacity-0 pointer-events-none': ! isCollapsed }"

 
<div class="absolute inset-0 rotate-180 transition" x-bind:class="{ 'opacity-0 pointer-events-none': ! isCollapsed }">
livewire.js:1123:13
Alpine Expression Error: isCollapsed is not defined

Expression: "! isCollapsed"

 
<div class="fi-fo-builder-item-conte…-4 dark:border-white/10" x-show="! isCollapsed">

[dmitry-udod]

This is a really interesting bug, and it seems to occur in Livewire itself when you change the order of keys in an existing array. Livewire stops seeing the x-data directive, even though it is present in the HTML ¯_(ツ)_/¯. The problem disappears when you use a new key (UUID) for existing array items.

https://github.com/filamentphp/filament/assets/4639175/466f81ca-69e9-4839-aeaf-2a6fc89af058

I'm not sure if this is a valid solution for the bug, but it provides some additional information.

[github-actions[bot]]

Hey @polar-sh[bot]! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.