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
Screen.Recording.2024-05-16.at.8.47.17.AM.mov
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">
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too