Topic footer button dependentKeys not working

[RGJ (Richard - Communiteq)]

I have problems getting dependentKeys to work in registerTopicFooterButton (documented here)

My code (minimal example)

  api.registerTopicFooterButton({
    id: "my-topic-footer-button",
    action() {
      this.topic.updateTags(["my-tag"]);
    },
    title() {
      return "my.button.title";
    },
    label() {
      return "my.button.label";
    },
    dependentKeys: ["topic.tags"],
    disabled() {
      return this.topic.tags.includes("my-tag");
    }
  });

Expected: once I press the button, the tags for the topic are set to my-tag (works), which triggers a re-render of the button, and disables it.
Expected: once I add the tag manually, the button is disabled

Reality: the re-render is not triggered in either scenario.

The button is correctly disabled/enabled on page refresh.

Anyone who can spot my error?

[david (David Taylor)]

Having a computed property depending on topic.tags will cause it to be invalidated when the array itself is replaced. But it won’t cause invalidation when items are added/removed from the array.

So I think you probably want topic.tags.@each (docs).

In general we’re trying to move away from computed properties, and towards native-getters/autotracking. I guess we’ll have to modernize the topic-footer-buttons API at some point to support that

[RGJ (Richard - Communiteq)]

Thank you for the really fast response David!

However, using topic.tags.@each does not resolve this… (either way, not when the tag is added manually, not when the button is pressed).

A console.log in the disabled() function does not run. It doesn’t run in displayed() either.

[david (David Taylor)]

When you click your button, does the new tag show up correctly at the top of the topic?

[RGJ (Richard - Communiteq)]

Yes, that works fine.

I also tried this.topic.notifyPropertyChange("tags");

and I even went desperate and tried to manipulate other properties (like this.topic.title = this.topic.title + "!" and including topic.title in dependentKeys). That does not work either. Using this.topic.set... doesn’t work as well.

[david (David Taylor)]

Interestingly, if I copy/paste your example from the OP and run locally, it seems to work perfectly:

Are there any other themes/plugins which could be interfering? Or perhaps something different about your ‘real’ code, compared to the minimal example in the OP?

[RGJ (Richard - Communiteq)]

My “minimal” code in the OP is my “real” code at the moment. I’m going to move it to a completely clean install and see if that changes anything.

EDIT yes it does work on a clean install

I’ll unlist this topic so I don’t have to live with the shame
I’ll update you when I find out what was causing this.

Thank you for your help @david!!