Vue.js 3 - AjaxStore - Filter Not working

[guilherme-pinto-reeeliance]

When using AjaxStore Grid with Vue.js 3 + Nuxtjs 3 Bryntum grid

"@bryntum/grid": "^5.6.8",
"@bryntum/grid-vue-3": "^5.6.8",

The server its responding normally with the filter working but the bryntum its havings this errors

We are having this problem when the user hits one character

TypeError: Cannot read properties of undefined (reading 'dataset')
at Proxy.processCellContent (http://localhost:3000/_nuxt/node_modules/@bryntum/grid-vue-3/src/WrapperHelperVue3.js?v=a0350e9d:52:38)
at Proxy.renderCell (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:94800:60)
at Proxy.render (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:94655:17)
at Proxy.renderFromRow (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:95802:11)
at Proxy.refresh (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:95867:8)
at Proxy.refreshRows (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:103605:18)
at Proxy.resumeRefresh (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:103697:14)
at Proxy.internalOnStoreEndApplyChangeset (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:102960:10)
at Proxy.trigger (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:5064:34)
at Proxy.syncDataset (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:28184:8)

And when the user hits a second character this error

TypeError: 'get' on proxy: property 'parser' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#' but got '#')
at Proxy.parse (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:20878:41)
at Proxy.changeValue (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:66566:58)
at Proxy.set (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:1628:44)
at Reflect.set ()
at MutableReactiveHandler.set (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-DSIC5XJC.js?v=a0350e9d:1517:32)
at Proxy.updateColumnFilterFields (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:83763:25)
at Proxy.onStoreFilter (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:83877:12)
at Proxy.trigger (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:5064:34)
at Proxy.triggerFilterEvent (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:24876:12)
at Proxy.afterPerformFilter (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:24871:14)

After this the bryntum stop working

After Hours and Hours of debug i think i found the source of this problem
This on the performFilter method where did you guys have a promise internalLoad

const result = await me.internalLoad({}, "", (event)=>{
                me.data = event.data;
                event = silent ? null : {
                    action: "filter",
                    filters,
                    oldCount,
                    records: me.storage.values
                };
                me.afterPerformFilter(event);
                me.trigger("refresh", event);
            }

on my tests the start of all errors its this part.

[jsakalos]

@guilherme-pinto-reeeliance, would you please post a showcase we can run and debug or the exact steps to reproduce the problem with one of our demos?

[guilherme-pinto-reeeliance]

follow a repository where you find the code to reproduce the error
https://github.com/guilherme-pinto-reeeliance/vue3-bryntum-filter-error

you can find a live version here: https://vue3-bryntum-filter-error.pages.dev/

the configuration file its this one

https://github.com/guilherme-pinto-reeeliance/vue3-bryntum-filter-error/blob/17a6230e4a01b455bfa03c0fed453adea20c1e20/app.vue

[ghulamghousdev]

Hi @guilherme-pinto-reeeliance,

Thanks for sharing it. We have a high prio ticket here #8846. I was working on it. I have fixed the issue already, will try to push to get it merge tomorrow. You can track this issue there.

[jsakalos]

Explanation: vue: true must be used with an appropriate renderer and it should not do anything by itself. The problem was that setting this flag but not providing the renderer caused the crash. The fix makes the code impervious to that combination. We expect it will be released in 5.6.9 or latest 5.6.10. Until then just remove the vue flag.

[guilherme-pinto-reeeliance]

Even with the render the problem continue. And whiteout the property set as true, nothing is showing up.

…

On Thu, Apr 4, 2024, 18:39 Saki ***@***.***> wrote: Explanation: vue: true must be used with an appropriate renderer and it should not do anything by itself. The problem was that setting this flag but not providing the renderer caused the crash. The fix makes the code impervious to that combination. We expect it will be release in 5.6.10. Until then just remove the vue flag. — Reply to this email directly, view it on GitHub <#8788 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BG4BASVATYUTLXLWHZK62EDY3WF3VAVCNFSM6AAAAABERBFBRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZXHAYDMMZXGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ghulamghousdev]

@guilherme-pinto-reeeliance the test case provided by you does not include any renderer. And I have tried it in our online example with a vue renderer and issue was resolved.

[SergeyMaltsev]

Closed as duplicate for resolved issue
#8846