QSlideItem breaks with contitionnal side templates
mmouterde opened this issue · comments
What happened?
I use QSlideItem to deal with a dynamic list of items.
Action are conditionnal depending on the item state.
Once slided, the condition changes and the action should be removed.
When I try to slide again (when no more action is possible), I get Errors and that break all List bindings.
What did you expect to happen?
When I try to slide an item with no more slide action, the pan should be ignored and should not produce error.
Reproduction URL
https://codepen.io/mmouterde/pen/WNmLZjz
How to reproduce?
Using the following codepen, slide the first item to change its state. Each action (right or left) could only done once, so the right/left templates are removed from the QItemSlide. However, when I slide again, that break all the page.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Firefox
Quasar info output
Operating System - Linux(5.15.0-94-generic) - linux/x64
NodeJs - 16.14.2
Global packages
NPM - 8.5.0
yarn - 1.22.5
@quasar/cli - undefined
@quasar/icongenie - 3.1.1
cordova - You have been opted out of telemetry. To change this, run: cordova telemetry on.
12.0.0 (cordova-lib@12.0.1)
Important local packages
quasar - 2.14.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.2.5
pinia - Not installed
vuex - Not installed
vite - 2.9.17 -- Native-ESM powered web dev build tool
eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - 5.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
@capacitor/cli - 5.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
@capacitor/android - 5.5.1 -- Capacitor: Cross-platform apps with JavaScript and the web
@capacitor/ios - 5.6.0 -- Capacitor: Cross-platform apps with JavaScript and the web
Quasar App Extensions
*None installed*
Networking
Host - <private info>
wlp58s0 - 192.168.1.26
wg0 - 10.0.0.5
br-5b095e80e9d2 - 172.18.0.1Relevant log output
Uncaught TypeError: t is null
g https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
g https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
end https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
mouseStart https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
beforeMount https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
VueJS 45
<anonymous> https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-1dfcc1bf-8548-771d-6d27-5d37e1d5240d:42
quasar.umd.prod.js:6:357036
g https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
forEach self-hosted:203
g https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
end https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
(Asynchrone : EventListener.handleEvent)
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
forEach self-hosted:203
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
mouseStart https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
(Asynchrone : EventListener.handleEvent)
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
forEach self-hosted:203
T https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
beforeMount https://cdn.jsdelivr.net/npm/quasar@2.14.3/dist/quasar.umd.prod.js:6
VueJS 45Additional context
Uncaught TypeError: node2 is null
onPan quasar.esm.js:28977
onPan quasar.esm.js:28974
move quasar.esm.js:8580
move quasar.esm.js:8623
addEvt quasar.esm.js:524
addEvt quasar.esm.js:523
touchStart quasar.esm.js:8443
addEvt quasar.esm.js:524
addEvt quasar.esm.js:523
beforeMount quasar.esm.js:8679
callWithErrorHandling runtime-core.esm-bundler.js:193
callWithAsyncErrorHandling runtime-core.esm-bundler.js:201
invokeDirectiveHook runtime-core.esm-bundler.js:2102
mountElement runtime-core.esm-bundler.js:5532
processElement runtime-core.esm-bundler.js:5448
patch runtime-core.esm-bundler.js:5316
mountChildren runtime-core.esm-bundler.js:5576
mountElement runtime-core.esm-bundler.js:5483
processElement runtime-core.esm-bundler.js:5448
patch runtime-core.esm-bundler.js:5316
componentUpdateFn runtime-core.esm-bundler.js:6004
run reactivity.esm-bundler.js:176
update runtime-core.esm-bundler.js:6128
setupRenderEffect runtime-core.esm-bundler.js:6138
mountComponent runtime-core.esm-bundler.js:5906
processComponent runtime-core.esm-bundler.js:5860
patch runtime-core.esm-bundler.js:5328
patchKeyedChildren runtime-core.esm-bundler.js:6323
patchChildren runtime-core.esm-bundler.js:6158
processFragment runtime-core.esm-bundler.js:5834
patch runtime-core.esm-bundler.js:5302
patchKeyedChildren runtime-core.esm-bundler.js:6281
patchChildren runtime-core.esm-bundler.js:6195
patchElement runtime-core.esm-bundler.js:5623
processElement runtime-core.esm-bundler.js:5459
patch runtime-core.esm-bundler.js:5316
Thanks for reporting this.
Fix will be available in Quasar v2.14.4
Vue was reusing DOM elements and thus wrongly assigning element refs