Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QInput] When in autogrow mode, ancestor container unexpectedly scrolls to top when input #15023

Closed
xuzuodong opened this issue Dec 1, 2022 · 2 comments · Fixed by #15046
Closed
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@xuzuodong
Copy link
Contributor

What happened?

If QInput component is in autogrow mode and is placed in a scrollable container, when scrolling down container, and then change content in QInput, the container unexpectedly scrolls to top.

屏幕录制2022-12-01 17 26 42

What did you expect to happen?

the container won't scroll when inputting

Reproduction URL

https://stackblitz.com/edit/quasarframework-wjsmsl?file=src/App.vue

How to reproduce?

  1. Go to the repro link
  2. In live preview area, enter several lines to fill the QInput component , until length of the QInput component big enough so that the parent div element becomes scrollable
  3. scroll to bottom
  4. type something in QInput

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Safari

Quasar info output

Operating System   	Darwin(22.1.0) - darwin/arm64
NodeJs             	16.15.0

Global packages
  NPM              	8.5.5
  yarn             	1.22.11
  @quasar/cli      	1.2.0
  @quasar/icongenie	Not installed
  cordova          	Not installed

Networking
  Host             	Porsche.local
  en0              	172.16.88.101

Relevant log output

No response

Additional context

No response

@xuzuodong xuzuodong added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Dec 1, 2022
@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar labels Dec 1, 2022
@Zaphod-Beeblebrox
Copy link

Zaphod-Beeblebrox commented Dec 1, 2022

I've run into this as well. I solved it by turning off auto-grow and dynamically computing the rows Prop:
`<q-input
type="textarea"

      clearable

      :rows="notesRows"

      label="Notes"

      stack-label

      v-model="scopeNotes"

    >

const notesRows = computed(() => {

let result = 5;

const usedrows = scopeNotes.value ? scopeNotes.value.split(\n).length : 0;

result = Math.min(15, Math.max(5, usedrows));

return result;

});
`
In my case I allow a dynamic range between 5 and 15 lines. adjust to your liking

pdanpdan added a commit to pdanpdan/quasar that referenced this issue Dec 2, 2022
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Dec 2, 2022
pdanpdan added a commit to pdanpdan/quasar that referenced this issue Dec 2, 2022
rstoenescu pushed a commit that referenced this issue Dec 16, 2022
rstoenescu pushed a commit that referenced this issue Dec 16, 2022
@rstoenescu
Copy link
Member

Fix will be available in Quasar v2.10.3 and v1.22.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/vite-plugin Bugs related to Vite usage with Quasar kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
3 participants