Textarea resize styles are lost after updates

[rzzf]

Vue version

3.5.32

Link to minimal reproduction

https://play.vuejs.org/#eNp9VF1v0zAU/StXeVg3qU23MfEQugmYJjGEAFEeeMiLl9y0Hk5s2U7aMlXib/D3+CUcO03XTWhPrc899+Oca+cheWdM2rWcZMnMc22U8HyVN0SzUnbhl6hQwrnLPFlZYfKkx97WunXMjWeLiHQfdMdWNgu6JG9bfkpTLDp+TquEcjte7IeOntdeWBbUTWpdskJKJ1SoRpnzGxVqDJx5OCMwHZKdEQ0SZQWSW+rVNbpaEIbpZaGbPLn6MZsGZi9xCo34N5seKMfRFVYaT459a0iJZhH6OiTnjayNtp4eyHI1pkLXpvVc0pYqq2sawchRKIFezlMcHlLBPR590pZrksa1NZVaaUtO+nR0MpCfmBMyokEI5810SrdUiObv7z8eIbUhp1X40Q1dz+eULUPmmCJTOJINWEJNVtqqklzBjbBSO/JLpk46eSeV9MiuIhKMQXfyGyMLoVAWgLdaKQi721DdKi+N4gCX0ktMmw5D743GzIMZx8cndHnVi097C46ODuT12F73k4XupD+E7axk6ZcZjc5PT816NA7QkuVi6YGdDdgWdbDRuLDd8mIdV2jDJZA03FqKBY2G4xg/Cx4KLzt+c9Cnkn4ShONOA96GWmm05lmuuIP50BlzbT/PhVnHo9fm8VC01mmbIVWGZxKxCg0mTv7ijM7OIy822l/8vpcoS/g02RU/ez0QITSIg6pkjAuJ4Sq5SO+dbvB6Y2qehC1IxfaLiZvKk6wvGmJYrl59jFh4pNHSmLPk4ud/8Hu3DliefLXs2HZ4b/sY5l2w78M3888QcBDE623D63wh+I2jjZixp71vmxJjH/DitLfxvcGN7+5mjd24QVT8yoC5jXx8KFq+fkH647iv0ouYB0eT7T/mvrYN

Steps to reproduce

Drag the bottom-right corner to resize the textarea

What is expected?

The textarea should resize smoothly based on native browser behavior.

What is actually happening?

The textarea size flickers when resizing.

System Info

System:
    OS: macOS 15.4.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 1.31 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.8.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 11.6.0 - /usr/local/bin/npm
    pnpm: 10.33.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 147.0.7727.57
    Firefox: 148.0
    Safari: 18.4
  npmPackages:
    vue: catalog: => 3.5.25

Any additional comments?

No response

[KtDune]

You can change textareaStyle to a static object.

const textareaStyle = {
  width: '200px',
  height: '100px',
}

When isHovering changes (e.g. during a resize drag), Vue re-renders the whole component and tries to sync the textarea's style back to the value of textareaStyle. Since textareaStyle is a ref holding { width: '200px', height: '100px' }, Vue patches the DOM with those original dimensions. However, that conflicts with the browser's native resize operation and causing the flickering.

Hope this helps!

[rzzf]

@KtDune Thanks, but this doesn’t solve my problem, because textareaStyle needs to remain reactive. I tried the same scenario in React and didn’t run into this issue, so I think this may be a bug in Vue.

[KtDune]

Please correct me if Im wrong but the re-rendering loop is working normally, the main issue is the conflict between browser injected style and Vue trying to reset your textarea's style when re-rendering.

If textareaStyle must be reactive, you can add v-memo="[textareaStyle]" directives to ensure the component only re-render when textareaStyle is changed. You can try it here:
https://play.vuejs.org/#eNp9VF1v0zAU/StXeaCb1I9tDB5KNw2qSQwhQJQHJMKDm9w23pzYsp20ZarE3+Dv8Us4dpaundCe2tx77sc5x/Z98taYYVNzMk4mnkujhOfLtCKa5LIJv0SZEs5dpMnKCpMmbeyq1LVjrjxbZKR7rxu2slrSBXlb8yFMsWj4KWwhlHvAxXmY6HnthWVBzaDUOSuUNEKFbjR2fqNCjw4zC99IAMqlRuLHQeYnUqOurzOiAlAuAHOFXk2xkAWgIyYzXaXJ5ffJKCBb9iPQb//Na+91RVeZktkd0EfHdHFJ9yF3MBKc7mklc1+Mqffq5MSse30qWC4LvwvQNq22GBWKp4WolnzYI60mo3YeIJPRniH4dJmVxpNjXxtSKA5yuNhNlkZbj/mWF33KdGlqzzltaWF1ST342wstwNN5ippiW2CPeh+15ZKkcXVJuVbakpN+2DvuwAeehYroG9JpNRrRDWWi+vv7j0dKbchpFX6g1nQ2o3ERKvsUkcKRrIASarDSVuXkMq6EldqRL5ga6eRcKulRvYiRYAqmk98YmQmFtgh4q5UCsfmGylp5aSA7wrn0EtsOu6V3JmPnToyj1rdIfthK8OLFHr02tuP91NpAPXreOXzWOhxCO5NPu9gWfXCaomEP5sU+LtOGc0SG4TK1h8hoKI71x0FD4WXDb/bmLKQfBOK4agjj+KA2SvOkVswhPnjGWtvuc27W8dNr8/iR1dZpO0apDLc3xhYYMHDyF4/p9Czi4qDdfWxniTyHToOH5qevOyCIBnJglfRxILHcQi6Ht05XeFRiaZoEF6Ri+9lEp9Jk3DYNOZirVx9iLLwdUdJYU3B295/4rVuHWJp8sezYNngGdjnsu2Tfpq9nn0BgL4lHpQ6PxjPJrxxlxI4t7F1d5Vh7Dxe3vYn3DWp8c9dreOM6UvHxA3Ib8Xi/ap4+Q/1x3ZfD81gHRZPtP/Ds6LY=

Now, textarea only re-render when textareaStyle is changed. Re-render caused by other ref won't re-render this textarea.

If this still does not meet your expected result, can you share more info about what you need?

[rzzf]

Thanks, I understand the root cause of this issue and have considered using v-memo. However, I don’t think it’s a sustainable long-term solution. This issue originates from element-plus/element-plus#24076, and I stand by my view that such behavior does not occur when working with native DOM or in other frameworks.

Additionally, this issue does not occur in Vue 2.

[rzzf]

There was a previous PR aimed at addressing this issue, but it was rejected because it bypassed Vue and manipulated the real DOM directly. However, updating the style of a textarea is a native behavior—why can’t this be properly handled or supported?

[linzhe141]

https://github.com/facebook/react/blob/94643c3b8516928e4cc7fad99912272670a0a990/packages/react-dom-bindings/src/client/CSSPropertyOperations.js#L153

https://github.com/preactjs/preact/blob/21dd6d04c1a9a43e5b60976bb5eb7d856253195b/src/diff/props.js#L58

https://github.com/ryansolid/dom-expressions/blob/b0ea65bf39105b8043f6f05f3305984cac7916a4/packages/dom-expressions/src/client.js#L182

I quickly searched other libraries and found that they all performed similar processing on whether the previous and next style keys were equal when patching styles.

[edison1105]

I attempted to skip the patch when the style hasn't changed, which preserves the native width/height modified by the textarea's resize. However, this also retains the display: block temporarily written by PrimeVue and the final normalized style results relied on by Vant's snapshot. As a result, both ecosystem test cases report style mismatches:

• https://github.com/vuejs/ecosystem-ci/actions/runs/24754452213/job/72424576036
• https://github.com/vuejs/ecosystem-ci/actions/runs/24754452213/job/72424576037

Given that this can be bypassed using v-memo, I don't think we should expand the scope of the fix. The fix should be narrowed down to only target the textarea resize scenario.