[v4] Nested structure loses content

[medienbaecker]

Description

When using a structure field inside of a structure field, the content of the entries in the nested structure field seems to get lost.

To reproduce

1. Create a nested structure field:

structure:
    fields:
      structure:
        label: Nested Structure
        type: structure
        fields:
          text: true

2. Add a structure entry to the top-level structure field
3. Add an entry to the nested structure field with some content
4. Close the drawer, click the little checkmark button or hit ⌘S
5. The content is gone

Your setup

Kirby Version
4.0.0-alpha.5

Your system (please complete the following information)

• OS: macOS Ventura 13.4.1
• Browser: Chrome
• Version: 115

[bastianallgeier]

I've just set up a test setup to reproduce it and unfortunately it happens for me as well. Just to confirm, do you already notice that the content will stay as soon as you try again?

[medienbaecker]

Just to confirm, do you already notice that the content will stay as soon as you try again?

@bastianallgeier Sorry, I'm afraid I don't understand your question. It looks like the content is just cosmetic. When editing the nested structure field I don't even get the "Revert/Save" prompt.

[afbora]

As far as I have tested, the last added row is not emitted. The input is triggered but not saved to localStorage. But I could not find the cause of the issue.

[MathiasGmeiner]

For me it happens for nested blocks as well.

[bastianallgeier]

@MathiasGmeiner nested blocks in a structure field?

[MathiasGmeiner]

@bastianallgeier no, sorry for being so vague. I'm dealing with nested blocks in a blocks field. Could this be a different issue altogether? My first try was a structure field within a block field, and then I tried a block inside a block field.

[bastianallgeier]

@MathiasGmeiner I'll try to reproduce this, but in our current nested blocks test setup I didn't notice this so far.

[MathiasGmeiner]

@bastianallgeier ok, let me know if I can help.

[hotdoy]

I have the same issue in nested structures. I can send you my BPs if needed.

[MathiasGmeiner]

I'm not sure if I'm doing something wrong with the nested block setup.
This is my setup:

test.yml

name: Test
fields:
  blocks:
    type: blocks
    fieldsets:
      - test-item

test-item.yml

name: Test Item
fields:
  text:
    label: Test
    type: text

[iskrisis]

Can confirm between alpha.4 and alpha.5 there is a problem with saving nested structures. For us it happens in blocks in block that has structure. When the structure is saved it keeps content only of the first row all other rows are empty (but they are there). It's like the content of rows is set to "".
Works on alpha.4.

[afbora]

After dozens of tests I still can't find out what is causing the problem, but when I edit the code below I see that it works. Maybe it will give you an idea @bastianallgeier @distantnative

add(value = null) {
    if (this.more === false) {
        return false;
    }

    value = value ?? this.$helper.field.form(this.fields);

    let index = 0;

    if (this.prepend === true) {
        this.items.unshift(value);
        index = 0;
    } else {
        this.items.push(value);
        index = this.items.length - 1;
    }

-   this.save();
    this.open(index);
},
close() {
    this.$panel.drawer.close();
},

/**
 * Focuses the add button
 * @public
 */
focus() {
    this.$refs.add?.focus?.();
},
/**
 * Opens form for a specific row at index
 * with field focussed
 * @param {number} index
 * @param {string} field
 */
jump(index, field) {
    this.open(index + this.pagination.offset, field);
},

/**
 * Edit the structure field entry at `index` position
 * in the structure form with field `field` focused
 * @public
 * @param {number} index
 * @param {string} field
 */
open(index, field, replace = false) {
    if (this.disabled === true || !this.items[index]) {
        return false;
    }

    this.$panel.drawer.open({
        component: "k-structure-drawer",
        props: {
            icon: this.icon ?? "list-bullet",
            next: this.items[index + 1],
            prev: this.items[index - 1],
            tabs: {
                content: {
                    fields: this.form
                }
            },
            title: this.label,
            value: this.items[index]
        },
        replace: replace,
        on: {
            input: (value) => {
                this.$set(this.items, index, value);
                this.save();
            },
            next: () => {
                this.open(index + 1, null, true);
            },
            prev: () => {
                this.open(index - 1, null, true);
            },
            remove: () => {
                this.remove(index);
            },
+           submit: () => {
+              this.save();
+              this.close();
+           }
        }
    });
},

https://github.com/getkirby/kirby/blob/4.0.0-alpha.5/panel/src/components/Forms/Field/StructureField.vue#L317-L401

[bastianallgeier]

Oh man, you are a genius. Indeed it does give me an idea. I think what happens here is a reactivity race condition. Save will emit the input event, which will also update the value prop. But at the same time the drawer opens with the last state of the data array and value and the content of the drawer will be out of sync

[hotdoy]

Happy to see some progress. ☺️

[distantnative]

@hotdoy Please keep in
Und that we haven't even reached beta stage with v4.

[hotdoy]

Yeah 😅 sorry. I took the risk.