Fix material bar position in textarea

test/visual/common.html

@@ -5,6 +5,10 @@
         font-size: 0;
         height: 24px;
       }
+
+      :host(.hidden-scrollbar) [part="input-field"]::-webkit-scrollbar {
+        display: none;
+      }
     </style>
   </template>
 </dom-module>

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

@@ -40,6 +40,8 @@
       invalid: <vaadin-text-area required invalid></vaadin-text-area>
       <p>
       label: <vaadin-text-area label="Foo"></vaadin-text-area>
+      <p>
+      label and value: <vaadin-text-area label="Foo" value="Bar"></vaadin-text-area>
     </fieldset>
   </form>
 

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

@@ -11,6 +11,11 @@
     window.addEventListener('WebComponentsReady', function() {
       setTimeout(function() {
         window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+
+        // Scroll fixed height text-area to bottom
+        const fixedHeightInputField = document.querySelector('#fixed-height').shadowRoot.querySelector('[part=input-field]');
+        fixedHeightInputField.scrollTop = fixedHeightInputField.scrollHeight;
+
         window.webComponentsAreReady = true; // Checked in gemini before capture callback
       });
     });
@@ -33,15 +38,22 @@
 
   <form>
     <fieldset id="text-area">
-      label and value: <vaadin-text-area label="Foo" value="Bar"></vaadin-text-area>
-      <p>
       prefix and suffix:
         <vaadin-text-area label="Foo" value="Bar">
           <span slot="prefix">prefix</span>
           <span slot="suffix">suffix</span>
         </vaadin-text-area>
       <p>
       long: <vaadin-text-area label="Foo" value="Bar" style="width: 300px;"></vaadin-text-area>
+      <p> fixed height: <vaadin-text-area id="fixed-height" class="hidden-scrollbar" style="height: 150px;" value="
+      Go Vaadin
+      Go
+      Go
+      Go
+      Go
+      Go
+      Go
+      Go"></vaadin-text-area>
     </fieldset>
   </form>
 

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

@@ -4,6 +4,7 @@
   <template>
     <style include="material-text-field">
       [part="input-field"] {
+        position: initial;
         height: auto;
         box-sizing: border-box;
       }