Closed qxygene closed 2 years ago
Also experiencing this when I clear the filter which drives the options computed object. Any ideas of a timeframe for this one as it is causing an issue in my customer-facing production build of https://converso.io
Thanks @pdanpdan ;)
fixed in Qv2.7.0/Qv1.19.0
I can see this still happening as of 2.10.0 when working with a QSelect with remote options from an API.
Cannot read properties of null (reading 'children')
Please create a reproduction codepen
Tried to fork from the Lazy Filtering example, but couldn't reproduce the error. However, I found out that it happens when I assign an empty list to my options:
const options = ref([]) // passed as :options to my q-select
const filter = (val, update, abort) { // passed as @filter to my q-select
update(async () => {
if (val === '') {
options.value = [] // <-- error
} else {
options.value = await myRemoteApiMethod(val) || [] // <-- will get the error if no matches are found
}
})
},
Also, the error doesn't happen if I don't provide a no-option slot to the select.
You're holding async/await
the wrong way :)
The update
function expect a sync function that updates the list of options - that is the reason for it, to be sure that when it ends the list of options is updated
const options = ref([]) // passed as :options to my q-select
const filter = async (val, update) => { // passed as @filter to my q-select
const list = val === '' ? [] : await myRemoteApiMethod(val)
update(async () => {
options.value = list || []
})
}
Nice catch, but unfortunately the bug stands. It fails when list
is empty and the select has options. If I change your code to something like below, no error is raised:
const options = ref([]) // passed as :options to my q-select
const filter = async (val, update) => { // passed as @filter to my q-select
const anything = { id: 123, name: 'Foo' }
const list = val === '' ? [ anything ] : await myRemoteApiMethod(val)
update(() => {
options.value = list || [ anything ]
})
}
try to break it from this pen and post back the reproduction when you found the combination that breaks it https://codepen.io/pdanpdan/pen/ExLBGMg?editors=1010
There was no way I could break it 😞. As for my code, reduced it to the smallest (dummy data, no async) and updated vue to latest. I just can't clear existing options. Maybe some dependency is the cause?
const filter = (val, update) => {
update(() => {
options.value = val === '' ? [] : [ { id: 123, name: 'Foo' } ] // still hit the error if val is empty and options.value is non-empty
})
}
I have no more ideas. I'll post here if I find anything. Thanks!
What do you mean by "I just can't clear existing option"?
Sorry, they get cleared yes, but the console prints "Cannot read properties of null (reading 'children')".
For my latest code above, my steps are:
Ok, I'll check these steps tomorrow
Sorry, I cannot reproduce your situation - maybe you have some options in QSelect? Please make a codepen with your situation
What happened?
Uncaught TypeError: Cannot read properties of null (reading 'children') at eval (use-virtual-scroll.js?4f3e:28:1)
What did you expect to happen?
Using select component with filter, when serch no match getting an error.
Reproduction URL
https://codesandbox.io/s/awesome-cray-f483ed?file=/src/components/test.vue
How to reproduce?
Uncaught TypeError: Cannot read properties of null (reading 'children') at eval (use-virtual-scroll.js?4f3e:28:1)
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar)
Platforms/Browsers
Chrome
Quasar info output
Relevant log output
No response
Additional context
No response