@vaadin/text-area 22.0.0 → 22.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "22.0.0",
+  "version": "22.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.0",
-    "@vaadin/field-base": "^22.0.0",
-    "@vaadin/input-container": "^22.0.0",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0",
-    "@vaadin/vaadin-material-styles": "^22.0.0",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0"
+    "@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": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
+  "gitHead": "55891f68d4da41e846e06dfe51dceba1665e41ce"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * 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';

package/src/vaadin-text-area.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.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 */
@@ -210,10 +222,16 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Polymer
         this.ariaTarget = input;
       })
     );
-    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
     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/lumo/vaadin-text-area-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-lumo-styles/color.js';

package/theme/lumo/vaadin-text-area.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.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' });

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';