Issue when re-ordering sets in bard

[freshface]

When i use this plugin in a set in a bard field everything works.
But when i reorder by using drag and drop I get the following error.
When i remove the tabs fieldset the error is gone.

See video: https://cln.sh/tYgnDDmLj5BCb5HJrLCX

Cookie warnings 2
DOMException: Node.insertBefore: Child to insert before is not a child of this node
    insertBefore$1 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    fe http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    ye http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    fe http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    ye http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    fe http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    ye http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    createPatchFunction http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    _update http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    N http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    get http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    run http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    flushSchedulerQueue http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    1 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    flushCallbacks http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    promise callback*timerFunc http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    nextTick$1 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    queueWatcher http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    update http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    notify http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    set http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    set http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    pasteSet http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:311
    transformPasted http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:305
    transformPasted http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:305
    drop http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    someProp http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    drop http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    $ http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    initInput http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    EditorView http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:29
    createView http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:109
    Editor$1 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:109
    Editor http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:111
    initEditor http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:311
    mounted http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:311
    invokeWithErrorHandling http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    callHook$1 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    insert http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    xe http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    createPatchFunction http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    _update http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    N http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    get http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    M http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    mountComponent http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    $mount http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    $mount http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:9
    _init http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    Vue$3 http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:5
    start http://albat.test/vendor/statamic/cp/build/assets/app-2661343f.js:173
    <anonymous> data:text/javascript;base64,U3RhdGFtaWMuY29uZmlnKFN0YXRhbWljQ29uZmlnKTsgU3RhdGFtaWMuc3RhcnQoKQ==:1
app-2661343f.js:5:38036
Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (77910 px). Occurrences of will-change over the budget will be ignored. 17d9ad25-93ce-4e5f-b2dd-54b091733f19

[freshface]

Also after reordering when using 2 tabs the second tab is gone.
See video: https://cln.sh/VNj7q8dGBsCyB3Myptvj

[freshface]

@eminos Do you know if this is fixable?

[eminos]

Hi Frederik! It might be fixable, although I'm not certain. This addon is kind of "hacking" into the frontend of Statamic, so there will definitely be bugs on edge cases and some might not be fixable.
I might be able to look into it, but not very soon unfortunately.

[adampatterson]

I've got the same problem as well.

Each one of my sets has some common tabs tab_content and tab_options

• Content
  • 🟢 Set One
    • Tab Content - tab_content
    • Tab Options - tab_options
  • 🔴 Set Two
    • Tab Content - tab_content
    • Tab Options - tab_options
  • 🟢 Set Three
    • Tab Content - tab_content
    • Tab Options - tab_options

There must be something in Set Two that ultimately causes the same issue insertBefore to trigger.

For me, Set Two has a Replicator.

I've got 25+ sets with similar tab names and don't have this problem.

So I started to pull things out until I found the culprit.

Removing the tabs did fix my issue, which is how I ended up here.

Then I renamed the tabs to something unique like tab_content_one and tab_options_two and the this seemed to resolve the issue.

• Content
  • 🟢 Set One
    • Tab Content - tab_content_one
    • Tab Options - tab_options_one
  • 🟢 Set Two
    • Tab Content - tab_content_two
    • Tab Options - tab_options_two
  • 🟢 Set Three
    • Tab Content - tab_content_three
    • Tab Options - tab_options_three

I'm now able to re-order the sets.

Next, I kept the previous tab names and updated Set Two, and it still worked.

• Content
  • 🟢 Set One
    • Tab Content - tab_content
    • Tab Options - tab_options
  • 🟢 Set Two
    • Tab Content - tab_content_two
    • Tab Options - tab_options_two
  • 🟢 Set Three
    • Tab Content - tab_content
    • Tab Options - tab_options

[eminos]

I've tried investigating this a bit, but couldn't really find a solution. It's a very strange problem, I think it's somehow related to how Bard and Vue renders the sets, and how that changes when you reorder sets in a Bard field.
Ultimately I couldn't solve it unfortunately, but like @adampatterson said, renaming the tab fields (handles) to something different in each set, seems to (somehow!) solve the issue with reordering.

I haven't tried this particular issue with the Statamic v6 branch, but if the issue is still there once Statamic 6.0-beta rolls around, I'll give it an other go to try to find the root cause.

[eminos]

This should be solved (reordering Bard sets that has tabs) in v2.0.0, but that only supports Statamic 6.
I guess we will all be on Statamic 6 in a few months, but if there is demand I could look into backporting the solution to v1.x (Statamic 5).