Files field cleared in some situations when clicking on the field heading

[danburzo]

Description

In some cases, clicking the heading of a Files field clears the already selected image, and does not show the file picker interface.

To reproduce

Having this fragment in the page blueprint:

      sidebar:
        width: 1/3
        sections:
          sidebar_fields:
            type: fields
            fields:
              cover:
                type: files
                label:
                  en: Cover image
              poster:
                type: files
                label:
                  en: Poster image
              stills:
                type: files
                label:
                  en: Stills

1. Upload and select an image for the Cover image field
2. Save and refresh the page
3. Click on the Cover image heading
4. The selected image is removed

Your setup

Kirby Version : 5.1.2
Console output: None

Your system (please complete the following information)

• OS: MacOS
• Browser: Firefox 144 / Safari 26.0.1

[afbora]

I can reproduce the issue for 5.1.0+. Also valid for users and pages field.

[afbora]

Clue about the issue

When we click on the field label, a /changes/save request is sent for some fields. If a save request has been sent before—for example, the page may have been saved, or another field label may have been clicked—there's no problem.

However, if the pages/users/files field label is clicked first after the page is loaded—that is, if the first /changes/save request is made with this click—this field data is sent empty in the payload.

[afbora]

Issue summary

I'm not 100% sure, but from my debugging I think the issue is that ModelsField components don't send their initial values to the form store when the page loads.

Here's what seems to be happening:

1. Page loads and files/users/pages field shows selected files correctly
2. Component gets the value from props
3. But I think the component doesn't tell Vuex store about this value
4. When you click the field label, somehow it triggers an auto-save request
5. The store tries to save all fields, but for this field it has nothing
6. So empty array gets saved

Other text fields work fine because I think they emit their values right away when rendering. ModelsField only emits when user actually changes something.

Possible Solution

I tried adding a mounted() hook to emit the initial value to the store. Tested it and it seems to work!

mounted() {
  // Send initial value to store on mount
  if (this.value && this.value.length > 0) {
    this.selected = this.value;
    this.$nextTick(() => {
      this.$emit("input", this.selected);
    });
  }
}

This way the store always knows about the field's value, even before user touches it.

I tested this fix and it solves the problem for me. Maybe there's a better way to do this, but this works! I know this might not be the best solution, but I hope it shows you where the problem is located.

[distantnative]

@afbora We do not have any Vuex store anymore in v5. Instead, we have the _changes content version on the server.

I will try to replicate it as well and look into it. Especially, why it changed with v5.1.

[distantnative]

Ok, already realized out what the issue is:
We tried to improve what happens if one clicks on the field label, trying to focus the fields in the best way when we pass an ID to the field label: https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Field/ModelsField.vue#L4

To avoid fields with a input validator wrapper to focus on the input validator (like https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Field/ModelsField.vue#L21), we pass on the id attribute from the validator custom component to what it considers the input: https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Input/Validator.js#L32-L35

However, in the models field it ends up selecting the remove button of the first selected item (https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Input/Validator.js#L52-L58). That of course is not what it should do.

But this is why then clicking the field label will pass the click on to the remove button - as far as I can tell.

[distantnative]

There are two ways we have to consider:

• Remove passing id to input validator and field component = clicking the label doesn't do anything
• finding an appropriate target within the input validator element and set it via the anchor attribute

[bastianallgeier]

@distantnative I think I would vote for A). The magic here is biting us already and I'm not sure if we can solve this for all future cases with more logic.