fix: position the material text-area bottom bar (CP)

src/vaadin-text-area.html

@@ -60,7 +60,7 @@
 
       <label part="label" on-click="focus" id="[[_labelId]]">[[label]]</label>
 
-      <div part="input-field" id="[[_inputId]]">
+      <div part="input-field" id="[[_inputId]]" on-scroll="__scrollPositionUpdated">
 
         <slot name="prefix"></slot>
 
@@ -181,6 +181,25 @@
           super.ready();
           this._updateHeight();
           this.addEventListener('animationend', this._onAnimationEnd);
+
+          this._inputField = this.root.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.__scrollPositionUpdated();
+        }
+
+        /** @private */
+        __scrollPositionUpdated() {
+          this.updateStyles({
+            '--_text-area-vertical-scroll-position': this._inputField.scrollTop + 'px',
+          });
         }
 
         /** @private */

test/.eslintrc.json

@@ -1,4 +1,7 @@
 {
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "globals": {
     "HTMLImports": false,
     "WCT": false,
@@ -11,6 +14,7 @@
     "sinon": false,
     "MockInteractions": false,
     "animationFrameFlush": false,
-    "listenOnce": false
+    "listenOnce": false,
+    "oneEvent": false
   }
 }

test/helpers.html

@@ -6,4 +6,8 @@
     };
     element.addEventListener(eventName, listener);
   };
+
+  window.oneEvent = (element, eventName) => {
+    return new Promise((resolve) => listenOnce(element, eventName, resolve));
+  };
 </script>

test/text-area.html

@@ -417,6 +417,67 @@
       });
     });
 
+
+    describe('--_text-area-vertical-scroll-position CSS variable', () => {
+      let textArea, inputField;
+
+      function wheel({element = inputField, deltaY = 0}) {
+        const e = new CustomEvent('wheel', {bubbles: true, cancelable: true});
+        e.deltaY = deltaY;
+        e.deltaX = 0;
+        element.dispatchEvent(e);
+        return e;
+      }
+
+      function getVerticalScrollPosition() {
+        if (window.ShadyCSS) {
+          return window.ShadyCSS.getComputedStyleValue(textArea, '--_text-area-vertical-scroll-position');
+        } else {
+          return getComputedStyle(textArea).getPropertyValue('--_text-area-vertical-scroll-position');
+        }
+      }
+
+      beforeEach(() => {
+        textArea = fixture(`default`);
+        inputField = textArea.root.querySelector('[part=input-field]');
+        textArea.style.height = '100px';
+        textArea.value = 'a\nb\nc\nd\ne\nf\ng\nh\ni\nj\nk\nl\nm\nn\no\np\nq\nr\ns\nt\nu\nv\nw\nx\ny\nz';
+      });
+
+      it('should be 0 initially', () => {
+        expect(getVerticalScrollPosition()).to.equal('0px');
+      });
+
+      it('should update value on scroll', async() => {
+        inputField.scrollTop = 10;
+        await oneEvent(inputField, 'scroll');
+        expect(getVerticalScrollPosition()).to.equal('10px');
+      });
+
+      it('should update value on wheel', async() => {
+        wheel({deltaY: 10});
+        expect(getVerticalScrollPosition()).to.equal('10px');
+      });
+
+      it('should scroll on wheel', async() => {
+        wheel({deltaY: 10});
+        expect(inputField.scrollTop).to.equal(10);
+      });
+
+      it('should cancel wheel event', () => {
+        const e = wheel({deltaY: 10});
+        expect(e.defaultPrevented).to.be.true;
+      });
+
+      it('should update value on resize', async() => {
+        inputField.scrollTop = 10;
+        await oneEvent(inputField, 'scroll');
+        textArea.style.height = `${inputField.scrollHeight}px`;
+        await oneEvent(inputField, 'scroll');
+        expect(getVerticalScrollPosition()).to.equal('0px');
+      });
+    });
+
     describe('pattern', () => {
       // eslint-disable-next-line max-len
       // https://github.com/web-platform-tests/wpt/blob/7b0ebaccc62b566a1965396e5be7bb2bc06f841f/html/semantics/forms/constraints/form-validation-validity-patternMismatch.html

test/visual/test.js

@@ -139,5 +139,12 @@ gemini.suite('vaadin-text-field', function(rootSuite) {
         .setCaptureElements('#text-area-clear-button')
         .capture('text-area-clear-button');
     });
+
+    gemini.suite(`text-area-scrolled-${theme}`, function(suite) {
+      suite
+        .setUrl(`vaadin-text-area/text-area-scrolled.html?theme=${theme}`)
+        .setCaptureElements('#text-area-scrolled')
+        .capture('text-area-scrolled');
+    });
   });
 });

test/visual/vaadin-text-area/text-area-scrolled.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../../../webcomponentsjs/webcomponents-loader.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+
+        const element = document.querySelector('vaadin-text-area');
+        element.value = 'a\nb\nc\nd\ne';
+        element.focus();
+        element.blur();
+      });
+    });
+  </script>
+  <link href="../common.html" rel="import">
+</head>
+
+<body>
+
+  <fieldset id="text-area-scrolled">
+    <vaadin-text-area style="height: 70px"></vaadin-text-area>
+  </fieldset>
+
+</body>

theme/material/vaadin-text-area-styles.html

@@ -19,6 +19,11 @@
         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);
+      }
     </style>
   </template>
 </dom-module>