Reactive blocks drawer hidden icon

[afbora]

Fixes

• Blocks drawer: hidden icon in drawer options not reactive Blocks drawer: hidden icon in drawer options not reactive #7105

Breaking changes

None

Docs

Ready?

• In-code documentation (wherever needed)
• Unit tests for fixed bug/feature
• Tests and CI checks all pass

For review team

• Add lab and/or sandbox examples (wherever helpful)
• Add changes & docs to release notes draft in Notion

[distantnative]

Don't you get console errors with this? Usually Vue is strictly against directly mutating props.

[afbora]

Hmm, no 🤷‍♂️

[afbora]

I'm not expert about that but I think you're right. I have updated as your idea anyway.

[bastianallgeier]

I think we should update the drawer props instead:

this.$panel.drawer.props.hidden = false;

[afbora]

I think my last change that Nico's idea is better :)

[distantnative]

@afbora I wouldn't create a new data entry. It introduces just another place this needs to be updated, another place that could be false later. Better to have a single place of truth (the prop).

@bastianallgeier I also don't think directly updating the drawer prop is the best idea. We should find out why emitting the event isn't working - or why it is working but the drawer props aren't reactively updating. I think that's the actual bug.

As I think about it, it's probably the same issue as #6301

[afbora]

@distantnative I looked into it a bit. The problem seemed simple but I guess it's more difficult than I expected. Feel free to close the PR

[afbora]

After digging into Vue’s reactivity system, I realized that props are one-way bindings. block.isHidden was already being updated correctly (set(block, "isHidden", false)), so the underlying data was never the issue. I think the problem is that the BlockDrawer component only received the initial value of block.isHidden as a plain prop, and since props are not reactive to changes in their original source unless explicitly watched, the component had no idea the value had changed.

So far IMHO this PR changes seems make sense :)

[afbora]

We can also add a watch to the hidden prop in BlockDrawer to make sure the local value updates if the parent changes it later.

watch: {
  hidden(value) {
    this.isHidden = value;
  }
}

[distantnative]

Have you tried if that works?

My understanding is rather that Vue props indeed are reactive. But the problem is that we lose reactivity when opening a dialog or drawer down in State.set(). I've tried a few things but so far not found a way how to keep reactivity alive.

I really think it's the same problem as #6301