quasarframework / quasar

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

QInput autogrow doesn't restore state if toggled on and off dynamically (leaves inline style in place) #17535

Open jannhama opened 1 month ago

jannhama commented 1 month ago

What happened?

QInput is defined with type="textarea" with autogrow that can be toggled on/off. I toggled autogrow prop on and off using a button. After setting autogrow to true and then back to false it didn't change text area back to scrolling mode as it initally was. This is due to inline style that is inserted to the q-input when autogrow is true but never removed.

What did you expect to happen?

If I dynamically change autogrow on/off then q-input component should respect that and change mode between autogrow and scrolling.

Reproduction URL

https://codepen.io/jannhama/pen/bGXNbeK?editors=1111

How to reproduce?

  1. Go to provided link
  2. Write several lines of text to the text area
  3. Press toggle autogrow button (initially it is false)
  4. Text area changes to autogrow mode correctly
  5. Press toggle autogrow button again
  6. Autogrow is set false but text area remains in autogrow mode

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

No Quasar cli in use. Reproducable in Quasar 2.17

Relevant log output

No response

Additional context

Inline style with overflow y-hidden in the end is left to the component even if autogrow is toggled off.

<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip" style=""><textarea class="q-field__native q-placeholder" tabindex="0" rows="6" id="f_a9f39d7b-5f49-4548-9505-23715853e4e8" value="text line text line text line text line text line text line text line text line text line text line text line text line text line text line text line text line text line" style="overflow-y: hidden; height: 329px;"></textarea><!----></div>

raziq-quraishi commented 1 month ago

Hi. I want to solve this issue. Please sign this issue so I can work on it.