Dismissible tips set to true in Vizy custom block layouts cause blocks to initially render collapsed

BenParizek commented 9 months ago

Describe the bug

Adding a custom block with a dismissible tip in the layout will initially render an enabled, collapsed block. Refreshing the page gets things working again, but now without that second step.

The issue appears to be caused by a javascript error. When a custom vizy block with a dismissible tip is added to an entry, the console throws the error:

Uncaught (in promise) TypeError: this.$el.querySelectorAll is not a function
    at Proxy.<anonymous> (VizyBlockFields.vue:27:22)

Which points to this code block:

// For any nested Vizy fields, mark them as Vue-rendered. This prevents us double-binding.
this.$el.querySelectorAll('.vizy-input-component').forEach((item) => {
  item.parentElement.__vueInit = true;
});

Steps to reproduce

Create a custom vizy block
Add a "Tip" UI Element and make set dismissible to true
Add it to a field layout
Select the block you created when editing an entry

Craft CMS version

4.5.11.1

Plugin version

2.1.8

Multi-site?

No

Additional context

No response

engram-design commented 9 months ago

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-4 as 2.1.14".

Do note however that dismissable UI tips won't really work with Vizy, as it mixes Vizy's Vue and Craft jQuery, and they don't play nicely.

In addition, later versions of Vizy handle any extra CSS/JS that's crept into rendering better by showing warning text.

engram-design commented 8 months ago

Fixed in 2.1.15

verbb / vizy