quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.9k stars 3.51k forks source link

Autogrow with a `max-height` on the input behaves unexpectedly on Chrome #15498

Closed maarteNNNN closed 1 year ago

maarteNNNN commented 1 year ago

What happened?

We have an input that we use for comments, we set the autogrow property on it and want to autogrow it until a certain height, so that that input doesn't grow above vital content. However when using the autogrow property and writing longer texts is behaving unexpectedly, the content being typed loses focus. I made a video where I demonstrate it: https://drive.google.com/file/d/18RsA6HOb0FzN9PmkGVfIq6l8IkDeGy1C/view?usp=sharing. Note that it need to be a long continuous text and this only happens on Chrome.

What did you expect to happen?

The text that is being typed should be visible and in context.

Reproduction URL

https://codepen.io/maarteNNNN/pen/GRXNXga

How to reproduce?

  1. Type a very long text on Chrome example e.g.:
asdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsajopidjposajdsapojdopsajdasdsadsadsadasdsadasdasdasdasdasdasdsadasdasd
  1. Type letters until there's a new line
  2. It seems to gradually get worse the more text is present

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(6.1.11-76060111-generic) - linux/x64
NodeJs - 16.17.0

Global packages
  NPM - 8.18.0
  yarn - 0.32+git
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.10 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - Not installed
  vuex - 4.1.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.12 -- Babel compiler core.
  webpack - 5.75.0 -- 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 - 4.9.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.5.5 -- 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-testing - 1.0.5 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-e2e-cypress - 3.1.2 -- A Quasar App Extension for Cypress e2e
  @quasar/quasar-app-extension-testing-quality - 1.0.0-beta.8 -- A Quasar App Extension for Code Quality
  @quasar/quasar-app-extension-testing-security - 1.0.0-alpha.8 -- A Quasar App Extension for Application Security, using OWASP ZAP
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-beta.5 -- A Quasar App Extension for running Jest tests

Networking
  Host - pop-os
  wlo1 - 192.168.1.19
  br-922ae3f57ac3 - 172.25.0.1
  enx3448edc072c4 - 192.168.1.3

Relevant log output

No response

Additional context

No response

rstoenescu commented 1 year ago

Fix will be available in Quasar 2.11.8 and v1.22.7