[VUE 3] Bryntum Vue Renderer Demo Issue

[trudog]

Started evaluating Bryntum yesterday by integrating the Grid component into a Quasar-based, Vue3 application, specifically the Vue3 cell-renderer demo (https://www.bryntum.com/examples/grid/frameworks/vue-3/javascript/vue-renderer/dist/). The page rendered fine, but we immediately noticed scrolling issues.

The page loads as expected, but when we scroll down and then back up, there are missing rows and errors in the console log. Attached are screenshots of the initial loaded page, the page after scroll down, and the page after scrolling back to top. We uploaded the project that demonstrates this behavior GitHub:

https://github.com/nethopper2/bryntum

Any thoughts as to the root cause, whether a bug in the Grid component or our implementation, would be appreciated.

Many thanks!

[marcio]

Hey

It looks like something specific with the Vue version of the Grid, and could be something related to Quasar. I created a ticket for our team to check it and fix it as soon as possible. https://github.com/bryntum/support/issues/4879

Thanks for your report.

[saki]

The problem is that the processCellContent method in the wrapper does not get the expected value(s). It is related to refs that are created by teleports (which implement the Vue component-in-cell support).

Is it possible that some of your config/setup can cause that the ref is an array instead of the expected scalar value? Also, does Quasar support teleports exactly same way as Vue 3? If there would be a difference and these unexpected array would be caused by Quasar, you could still use custom elements returned from column renderer.

Screen Shot 2022-07-01 at 12.03.12.png (1.17 MiB) Viewed 231 times

[trudog]

We removed Quasar from the equation by creating a new Vue3 project with the same, unmodified Grid demo, and it breaks the same way.

While investigating the problem, we went to WrapperHelperVue3.js and inserted this code:

// Find cached teleport
let cached = refs[key];

// added this array check
if (Array.isArray(cached)) {
    cached = cached[0]
}

// Check if record changed
if (cached && cached.$el.dataset.generation !== String(record.generation)) {
    teleports.delete(key);
    cached = null;
}

With this code and restarting the dev server, the scrolling issues goes away. Not sure if this is the proper or complete way to resolve the core problem, but providing our test steps and results.

Pull the changes from the Git repo (https://github.com/nethopper2/bryntum) and you will see two project folders: quasar with the original application and vuecli with the vanilla Vue3 application.

This appears to be an issue with Grid component, agreed? Can you reproduce this?

[shawn]

subscribing

[saki]

Thank you for the information. I'll investigate what's really happening because our Vue 3 demo works. FYI, I was also thinking about the code you added but before adding it I would like to understand why it is needed now and was not needed before. Stay tuned.

[saki]

So the result is that the array check must be there because if I run our demo against Vue 3.2.37 (latest as of now) then it also crashes. I have implemented the fix virtually the same way as you did above and it will be released in the next version. See https://github.com/bryntum/support/issues/4879

Thank you very much for reporting it.