QInput

[zta7]

What happened?

When using Qinput with autogrow attr and input mutiple lines then scrollbar appear.

What did you expect to happen?

And class='no-scroll' to input element directly and no scrollbar.

Reproduction URL

https://codepen.io/zta/pen/KKZrjaO?editors=101

How to reproduce?

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[MilosPaunovic]

I can't reproduce it.
https://codepen.io/milospaunovic/pen/dyJQBVJ?editors=1010

Where does the scroll appear?

[zta7]

emmmm....

I can't reproduce it. https://codepen.io/milospaunovic/pen/dyJQBVJ?editors=1010

Where does the scroll appear?

[MilosPaunovic]

It doesn't happen with me, on Chrome Version 100.0.4896.88 (Official Build) (x86_64), macOs BigSur 11.4. Please provide platform and browser info, so it could be further investigated.

[zta7]

Same chrome version as yours. But both on win10 or win11 laptop has that problem.

[zta7]

idk how scrollbar appeared, but add 'no-scroll' class on input work for me.

[zta7]

And here's another problem with autogrow attr.Bcz it doesnt check window resize.
Should it fix in QInput component ?

[MilosPaunovic]

I've just tried on Chrome Version 100.0.4896.88 (Official Build) (64-bit) on Win10 HP laptop, and it does seem alright. Could your try in Incognito mode and in another browser, to try to pinpoint the exact issue?

[zta7]

In Incognito mode on chrome
Version 100.0.4896.127 (Official Build) (64-bit) (i just upgrade)
win11 XiaoMi laptop

And same problem the newest firefox.

Look at https://usefulangle.com/post/41/javascript-textarea-autogrow-adjust-height-based-on-content
It's works fine with 'overflow:hidden'

but since i disabled it, the scrollbar show up.

And https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

This will make height less than the real height bcz it use round to calc, so it's reasonable set 'autoflow: hidden' to totally avoid scrollbar issue.

Actually i did some research, i found people use
'input.style.height=1px
input.style.height=input.scrollHeight '
always make scrollbar be hiddened.
But i cant figure out what make the scrollbar happend.

BTW, not the real bussiness. Qinput -> adjustHeight() trigger twice in each user input.
"version": "2.6.6",

[zta7]

Hey, bro. I found more common issue reproduce. Tested on win10 Chrome 100.0.1185.44
No 'Enter' pressed !

https://codepen.io/milospaunovic/pen/dyJQBVJ?editors=1010
The Begining it has one more line which should not exist.

After u type more words, textarea comes more weird.

[hawkeye64]

I can't make it create a scrollbar, but I do see the extra line (or 2) at the bottom behavior.

[rstoenescu]

Fix will be available in v2.8.3