Don't flex-grow the input-field part of a text-field

vaadin · Jan 14, 2019 · 34b65aa · 34b65aa
1 parent 090aa2f
commit 34b65aa
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -46,6 +46,10 @@
         flex: auto;
       }
 
+      .vaadin-text-field-container [part="input-field"] {
+        flex-grow: 0;
+      }
+
       /* Reset the native input styles */
       [part="value"],
       [part="input-field"] ::slotted(input),

diff --git a/test/text-field.html b/test/text-field.html
@@ -19,6 +19,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="wrapped">
+    <template>
+      <div>
+        <vaadin-text-field></vaadin-text-field>
+      </div>
+    </template>
+  </test-fixture>
+
   <test-fixture id="default-with-slotted-input">
     <template>
       <vaadin-text-field>
@@ -28,6 +36,25 @@
   </test-fixture>
 
   <script>
+
+    describe('Wrapped', () => {
+      var wrapper, textField, inputField;
+
+      beforeEach(() => {
+        wrapper = fixture('wrapped');
+        textField = wrapper.firstElementChild;
+        inputField = textField.shadowRoot.querySelector('[part=input-field]');
+      });
+
+      it('should not grow the input field inside a flex container', () => {
+        const fieldHeight = inputField.clientHeight;
+        wrapper.style.display = 'flex';
+        wrapper.style.height = '100px';
+        expect(inputField.clientHeight).to.equal(fieldHeight);
+      });
+
+    });
+
     ['', 'with slotted input'].forEach(condition => {
       let fixtureName = '';
       if (condition !== '') {