Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'focus')

[cybernetchin]

What happened?

The build threw error and frozen on this code see 2 screenshots:

What did you expect to happen?

The same code has no issues for the past 6 months suddenly caught the issue now.

Reproduction URL

none

How to reproduce?

Sorry, no access as the portal needs a private login and however the staging portal is blocked by vpn. It occurs when the web form is submitted. It occurs on a Chrome Incognito browser.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), TypeScript Support

Platforms/Browsers

Chrome

Quasar info output

See screenshot2 above

Relevant log output

quasar.62c20b60.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'focus')
    at quasar.62c20b60.js:1:126221
    at Array.find (<anonymous>)
    at quasar.62c20b60.js:1:126195

Additional context

No response

[github-actions]

Hi @cybernetchin! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[yusufkandemir]

The relevant piece of code:

quasar/ui/src/components/form/QForm.js

Lines 82 to 90 in 1161092

	// Try to focus first mounted and active component
	const activeError = errors.find(({ comp }) => (
	typeof comp.focus === 'function'
	&& vmIsDestroyed(comp.$) === false
	))
	if (activeError !== void 0) {
	activeError.comp.focus()
	}

I don't know why that would happen. If you mean if that worked for 6 months and stopped working even if you didn't change anything at all, then not much to say or do. If you upgraded a dependency or something, likely Vue, it could help. Given the fact that there is 0 information, it won't be really possible to pinpoint or fix the issue. You don't have to provide actual access to the portal, but you have to at least provide a code snippet, more context, etc.

I will leave this open hoping @rstoenescu can understand any potential problems regarding the code.

[cybernetchin]

Please any update on this

[yusufkandemir]

Don't expect an update in the next couple of days due to life problems. At least not if you provide more information and hope someone else provides help before.

[cybernetchin]

Thank you for yusufkandemir respond in time respect for a fix.

Currently I modified my issue code for a bandage at least to get things running in the mean time until Quasar has a release for a fix.

Please find below are 2 spots in my code for the bandage to get things running.

1. I added 3 QForm's props, autofocus, noErrorFocus and noResetFocus:
   `
   <q-form
   ref="formRef"
   :autofocus="false"
   :noErrorFocus="true"
   :noResetFocus="true"
   class="q-mt-xs row col-12"

`

2. I commented out the QForm's validation return:
   formRef.value?.validate().then(async (success: boolean) => { // Commented out as it triggered Quasar form's bug // if (!success) { // cancelFormSubmit(index !== 0, false); // ... // ... // return; // } ...

However with this bandage that means I have to trade off the QInput's rules prop like javascript Validator plugin not applicable and not working (because I commented out the code as highlighted above)...