filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
18.09k stars 2.83k forks source link

Extra rows added to KV field when re-ordered in Builder field #9005

Closed binaryfire closed 9 months ago

binaryfire commented 11 months ago

Package

filament/filament

Package Version

3.0.73

Laravel Version

10.2.6

Livewire Version

3.0.7

PHP Version

8.2

Problem description

Video: https://www.youtube.com/watch?v=NhrMKYYAoWM

Additionally, these phantom rows can't be deleted (the delete button doesn't work)

Expected behavior

Extra rows shouldn't be added when the KV field is moved.

Steps to reproduce

See video

Reproduction repository

https://github.com/binaryfire/filament-kv-bug

Relevant log output

No response

github-actions[bot] commented 11 months ago

Hey @binaryfire! We're sorry to hear that you've hit this issue. 💛

However, it doesn't look like you've provided much information on how to replicate the issue. Please edit your original post with clear steps we need to take.

binaryfire commented 11 months ago

@danharrin This shouldn't have been auto-closed. I included a video which clearly demonstrates the issue and how to reproduce it.

danharrin commented 11 months ago

In the future, the video can go in the "Steps to reproduce" field, so the bot knows that you've put in some effort

binaryfire commented 10 months ago

I'm also occasionally seeing this when I try and delete blocks containing KV fields from a Builder field. Perhaps it sheds more light on the problem:

image
danharrin commented 9 months ago

I'm sorry, I've spent like 4 hours on this now and cannot narrow down what is happening, I'm going to have to move on. If anyone wants to do more research:

  1. Rows arent actually getting added to the Alpine state
  2. This is a problem with thex-for something is replicating those template rows
  3. It only happens when Sortable.js reorders the rows
  4. This does not happen if the Alpine component is inline via x-data, or if it is registered via Alpine.data(). It only happens if the component is served with Async Alpine, so maybe that is part of what is wrong.
awcodes commented 9 months ago

PR submitted to dependency to fix this issue.

https://github.com/Accudio/async-alpine/pull/38