[FIX] web: prevent textarea vertical resize on chrome

Since we correctly compute the height of the field, we don't want to let the user resize it vertically.

This was already working on Firefox because it doesn't require the field to be in the DOM to read the resize attribute, but Chrome does require the field to already be in DOM.

Task: 1869469
PR: #26518

2 files changed, 40 insertions, 7 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 1d82cea107f..060bb141eff 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -87,6 +87,18 @@ return {
             $textarea.css({height: Math.max(height + heightOffset, minHeight)});
         }
 
+        function removeVerticalResize() {
+            // We already compute the correct height:
+            // we don't want the user to resize it vertically.
+            // On Chrome this needs to be called after the DOM is ready.
+            var style = window.getComputedStyle($textarea[0], null);
+            if (style.resize === 'vertical') {
+                $textarea[0].style.resize = 'none';
+            } else if (style.resize === 'both') {
+                $textarea[0].style.resize = 'horizontal';
+            }
+        }
+
         options = options || {};
         minHeight = (options && options.min_height) || 50;
 
@@ -103,18 +115,16 @@ return {
         }).css(direction, -10000);
         $fixedTextarea.data("auto_resize", true);
 
-        var style = window.getComputedStyle($textarea[0], null);
-        if (style.resize === 'vertical') {
-            $textarea[0].style.resize = 'none';
-        } else if (style.resize === 'both') {
-            $textarea[0].style.resize = 'horizontal';
-        }
         resize();
+        removeVerticalResize();
         $textarea.data("auto_resize", true);
 
         $textarea.on('input focus change', resize);
         if (options.parent) {
-            core.bus.on('DOM_updated', options.parent, resize);
+            core.bus.on('DOM_updated', options.parent, function () {
+                resize();
+                removeVerticalResize();
+            });
         }
     },
     /**
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 0c7a1163708..b608ed36913 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -1457,6 +1457,29 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('text fields in edit mode, no vertical resize', function (assert) {
+        assert.expect(1);
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<field name="txt"/>' +
+                '</form>',
+            res_id: 1,
+        });
+
+        form.$buttons.find('.o_form_button_edit').click();
+
+        var $textarea = form.$('textarea:first');
+
+        assert.strictEqual($textarea.css('resize'), 'none',
+            "should not have vertical resize");
+
+        form.destroy();
+    });
+
     QUnit.test('text fields in editable list have correct height', function (assert) {
         assert.expect(2);