Validation error does not scrollto on FF nor Chrome

[geoidesic]

What happened?

Here's the example of the problem: https://6vjl2t.sse.codesandbox.io/

The issue is that when validation fails (on the name field e.g.) and the window is short (i.e. scrollbar appears) and one clicks Submit, the window does not scroll to the invalid field.

It does scroll on Safari, but it does not on Chrome (tested on Mac and Windows), nor on Firefox (tested on Mac).

What did you expect to happen?

It should scroll on all browsers.

Reproduction URL

https://codesandbox.io/s/quasar-form-scroll-on-validation-6vjl2t

How to reproduce?

1. Go to the link (using Chrome browser)
2. Resize the window so that the top field is not visible when the Save button is visible
3. Click on the Save button
4. Should scroll up to the field but it doesn't.

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Darwin(21.4.0) - darwin/x64
NodeJs - 12.22.12

Global packages
  NPM - 8.6.0
  yarn - 1.22.17
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 1.18.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.3.0 -- Quasar Framework local CLI
  @quasar/extras - 1.13.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.14 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.5.3 -- Official router for Vue.js 2
  vuex - 3.6.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.9 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qmediaplayer - 1.4.1 -- A Quasar App Extension for @quasar/quasar-ui-qmediaplayer
  @portals/quasar-app-extension-utils-quasar - 1.0.26 -- Quasar App Extension which injects Vue components

Networking
  Host - Noels-MacBook-Air.local
  en0 - 192.168.0.13

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @geoidesic! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, 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. 👏

[pdanpdan]

This is by design, because auto scrolling on focus can cause a lot of problems in containers that are animated. But you can listen for the @validation-error event - you'll get a ref to the component and you can do a scrollIntoView on it.

The reason it scrolls in ~IE~ Safari is because it does not implement the preventScroll for focus

[geoidesic]

Thanks for the reply @pdanpdan. I tried @validation-error but I get an error:

TypeError: el.scrollIntoView is not a function"

Here's my code:

<template>
...
     @validation-error="validationError"
...
<script>
...
   methods: {
      validationError(el) {
          el.scrollIntoView();
...

[geoidesic]

nvm... figured it out:

el.$el.scrollIntoView();

[geoidesic]

Although with that in place the validation no longer works correctly. On first submit, the validation passes (even though it failed). This code is inside a q-stepper and with the scrollIntoView instead of stopping the submit, it progresses to the next step in the form wizard (i.e. the stepper). This happens because the @validation-error event does not trigger in this case. However, if I then go back to the first step and submit again, then it works. Note that this behaviour only occurs if I have the greedy prop enabled on the q-form, without that it works as expected.

I have created a new sandbox to illustrate the issue: https://codesandbox.io/s/quasar-form-scroll-on-validation-forked-5bosgh?file=/src/components/StandardForm.vue . This is slightly different from my use-case in that it is not encapsulated in a q-stepper but you can still note that the event does not trigger as the alert never occurs.

[pdanpdan]

You have a problem with the rules - they are generated by a function and you will get a new set of rules every time something re-renders.

https://codesandbox.io/s/quasar-form-scroll-on-validation-forked-nugxpi?file=/src/components/StandardForm.vue

[geoidesic]

I don't understand? Not sure how that relates to the problem, nor why greedy would expose that, nor how to fix it.

[geoidesic]

Oh wait, I see you provided an updated example. My bad. Let me look at that...

[geoidesic]

I see now. Understood. Thanks!