Language switch re-renders field plugin only when it has translate:false

Kirby 3 Questions 🤔
1

I have a very strange behavior going on regarding the translate property.

Backstory: I have a field plugin that always holds the value null so that the field value doesn’t appear in the txt file. That value is only ever changed inside the field component on the front-end. This has the side-effect of allowing me to use Kirby’s Save/Reject changes functionality of a field without actually saving a value on disk. I store the actual field value by other means via the Rest API.

When I want to show the Save/Reject dialog, I emit an input event from my field component with the current field value. Then, 3 things can happen:

  1. The user saves - the field value goes to the back end, I save it by my own means, and return null to the front-end. When the front-end receives null, the dialog disappears (because the field value “on disk” is null and there is “no change”).
  2. The user rejects - the component’s value prop (that I watch) is changed to null (its old value) by Kirby and I know that I have to fetch the old field value and show it to the user.
  3. The user refreshes the page - my component’s value prop will be populated with the value prior to the refresh by Kirby. Since that value is not null, I know that it’s unsaved and I display it to the user.

Actual question comes here.

Whenever my field component is rendered, I fetch the value for the current translation in the created Vue hook from the Rest API. The strange thing is that when the field has translate:true and I change the language after the panel is loaded, the component is not re-rendered and the field is not updated with that language’s value. Even stranger is that when the field has translate:false and I change the language, the component is re-rendered and I get exactly the behavior I want. Why? That behavior happens without making any changes, so the actual field value is null in both cases before and after the language switch.

I tried to check the source code and figure out how translate affects things, but I didn’t find anything useful. I think @distantnative might know something about this?

2

Have you tried using watch on value and re-fetch then?

1 Like
3

Yeah, I ended up using a combination of watch on value and watch on the current language code. There are other solutions too, but I was just wondering what was causing the re-render.

Anyway, I published the plugin and you can check exactly how I made it here, in case you’re interested. In certain cases it fetches multiple times without the need to, but there’s a race condition between the API fetch for the value and the watch handler for value, so that’s the simplest and most reliable way.