@vaadin/text-area 23.0.0-alpha4 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "23.0.0-alpha4",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,17 +33,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha4",
-    "@vaadin/field-base": "23.0.0-alpha4",
-    "@vaadin/input-container": "23.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/field-base": "23.0.0-beta3",
+    "@vaadin/input-container": "23.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/vaadin-text-area.d.ts

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -76,7 +77,7 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+declare class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
    * Maximum number of characters (in Unicode code points) that the user can enter.
    */

package/src/vaadin-text-area.js

@@ -6,6 +6,7 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
@@ -59,8 +60,9 @@ registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-ar
  * @mixes ElementMixin
  * @mixes PatternMixin
  * @mixes ThemableMixin
+ * @mixes ResizeMixin
  */
-export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
   static get is() {
     return 'vaadin-text-area';
   }
@@ -140,11 +142,12 @@ export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(Element
           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">
@@ -197,7 +200,26 @@ export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(Element
     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
+   * @override
+   */
+  _onResize() {
+    this.__scrollPositionUpdated();
   }
 
   /** @protected */
@@ -216,6 +238,12 @@ export class TextArea extends PatternMixin(InputFieldMixin(ThemableMixin(Element
     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' });