@vaadin/text-area 22.0.3 → 22.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "22.0.3",
+  "version": "22.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.3",
-    "@vaadin/field-base": "^22.0.3",
-    "@vaadin/input-container": "^22.0.3",
-    "@vaadin/vaadin-lumo-styles": "^22.0.3",
-    "@vaadin/vaadin-material-styles": "^22.0.3",
-    "@vaadin/vaadin-themable-mixin": "^22.0.3"
+    "@vaadin/component-base": "^22.0.4",
+    "@vaadin/field-base": "^22.0.4",
+    "@vaadin/input-container": "^22.0.4",
+    "@vaadin/vaadin-lumo-styles": "^22.0.4",
+    "@vaadin/vaadin-material-styles": "^22.0.4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "935ad1ea65a79b0f9ecb10d767689479b36c4e07"
+  "gitHead": "55891f68d4da41e846e06dfe51dceba1665e41ce"
 }

package/src/vaadin-text-area.js

@@ -138,11 +138,12 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
           disabled="[[disabled]]"
           invalid="[[invalid]]"
           theme$="[[theme]]"
+          on-scroll="__scrollPositionUpdated"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="textarea"></slot>
           <slot name="suffix" slot="suffix"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix"></div>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -195,7 +196,18 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
     super.connectedCallback();
 
     this._inputField = this.shadowRoot.querySelector('[part=input-field]');
+
+    // Wheel scrolling results in async scroll events. Preventing the wheel
+    // event, scrolling manually and then synchronously updating the scroll position CSS variable
+    // allows us to avoid some jumpy behavior that would occur on wheel otherwise.
+    this._inputField.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      this._inputField.scrollTop += e.deltaY;
+      this.__scrollPositionUpdated();
+    });
+
     this._updateHeight();
+    this.__scrollPositionUpdated();
   }
 
   /** @protected */
@@ -214,6 +226,12 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
     this.addEventListener('animationend', this._onAnimationEnd);
   }
 
+  /** @private */
+  __scrollPositionUpdated() {
+    this._inputField.style.setProperty('--_text-area-vertical-scroll-position', '0px');
+    this._inputField.style.setProperty('--_text-area-vertical-scroll-position', this._inputField.scrollTop + 'px');
+  }
+
   /** @private */
   _onAnimationEnd(e) {
     if (e.animationName.indexOf('vaadin-text-area-appear') === 0) {

package/theme/material/vaadin-text-area-styles.js

@@ -21,6 +21,11 @@ const textArea = css`
     white-space: pre-wrap; /* override "nowrap" from <vaadin-text-field> */
     align-self: stretch; /* override "baseline" from <vaadin-text-field> */
   }
+
+  [part='input-field']::before,
+  [part='input-field']::after {
+    bottom: calc(var(--_text-area-vertical-scroll-position) * -1);
+  }
 `;
 
 registerStyles('vaadin-text-area', [inputFieldShared, textArea], { moduleId: 'material-text-area' });