From 6c97ade526acac9a75ff3e6c5dea0b84c8b53636 Mon Sep 17 00:00:00 2001
From: Anton Platonov <platosha@gmail.com>
Date: Mon, 10 Jun 2019 17:55:54 +0300
Subject: [PATCH] fix(group): prevent horizontal overflow in IE11 instead of
 wrapping

Fixes #113
---
 src/vaadin-checkbox-group.html       |  6 +++
 test/.eslintrc                       |  3 +-
 test/vaadin-checkbox-group_test.html | 55 ++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/vaadin-checkbox-group.html b/src/vaadin-checkbox-group.html
index b95f455..a865a79 100644
--- a/src/vaadin-checkbox-group.html
+++ b/src/vaadin-checkbox-group.html
@@ -14,6 +14,9 @@
     <style>
       :host {
         display: inline-flex;
+
+        /* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
+        max-width: 100%;
       }
 
       :host::before {
@@ -29,6 +32,9 @@
       .vaadin-group-field-container {
         display: flex;
         flex-direction: column;
+
+        /* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
+        width: 100%;
       }
 
       [part="label"]:empty {
diff --git a/test/.eslintrc b/test/.eslintrc
index abdbb89..a19562b 100644
--- a/test/.eslintrc
+++ b/test/.eslintrc
@@ -8,6 +8,7 @@
     "sinon": false,
     "expect": false,
     "gemini": false,
-    "MockInteractions": false
+    "MockInteractions": false,
+    "animationFrameFlush": false
   }
 }
diff --git a/test/vaadin-checkbox-group_test.html b/test/vaadin-checkbox-group_test.html
index 143d785..144549d 100644
--- a/test/vaadin-checkbox-group_test.html
+++ b/test/vaadin-checkbox-group_test.html
@@ -51,6 +51,25 @@
   </dom-bind>
 </test-fixture>
 
+<test-fixture id="wrapping">
+  <template>
+    <vaadin-checkbox-group>
+      <vaadin-checkbox value="c_1">Checkbox 1</vaadin-checkbox>
+      <vaadin-checkbox value="c_2">Checkbox 2</vaadin-checkbox>
+      <vaadin-checkbox value="c_3">Checkbox 3</vaadin-checkbox>
+      <vaadin-checkbox value="c_4">Checkbox 4</vaadin-checkbox>
+      <vaadin-checkbox value="c_5">Checkbox 5</vaadin-checkbox>
+      <vaadin-checkbox value="c_6">Checkbox 6</vaadin-checkbox>
+      <vaadin-checkbox value="c_7">Checkbox 7</vaadin-checkbox>
+      <vaadin-checkbox value="c_8">Checkbox 8</vaadin-checkbox>
+      <vaadin-checkbox value="c_9">Checkbox 9</vaadin-checkbox>
+      <vaadin-checkbox value="c_10">Checkbox 10</vaadin-checkbox>
+      <vaadin-checkbox value="c_11">Checkbox 11</vaadin-checkbox>
+      <vaadin-checkbox value="c_12">Checkbox 12</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </template>
+</test-fixture>
+
 <script>
   describe('vaadin-checkbox-group', () => {
 
@@ -422,5 +441,41 @@
       expect(vaadinCheckboxList[2].checked).to.be.true;
     });
   });
+
+  describe('vaadin-checkbox-group wrapping', () => {
+    let vaadinCheckboxGroup;
+
+    beforeEach((done) => {
+      vaadinCheckboxGroup = fixture('wrapping');
+      vaadinCheckboxGroup._observer.flush();
+      animationFrameFlush(done);
+    });
+
+    it('should not overflow horizontally', () => {
+      const parentWidth = vaadinCheckboxGroup.parentElement.offsetWidth;
+
+      expect(vaadinCheckboxGroup.offsetWidth).to.be.lte(parentWidth);
+      expect(
+        vaadinCheckboxGroup
+          .shadowRoot
+          .querySelector('[part~="group-field"]')
+          .offsetWidth
+      ).to.be.lte(parentWidth);
+    });
+
+    it('should wrap checkboxes', () => {
+      const checkboxes = Array.from(vaadinCheckboxGroup.children);
+      const {top: firstTop, left: firstLeft} =
+        checkboxes[0].getBoundingClientRect();
+
+      const wrappedCheckboxes = Array.from(checkboxes)
+        .slice(1)
+        .filter(checkbox => checkbox.getBoundingClientRect().top > firstTop);
+
+      expect(wrappedCheckboxes).not.be.empty;
+      expect(wrappedCheckboxes[0].getBoundingClientRect().left)
+        .to.equal(firstLeft);
+    });
+  });
 </script>
 </body>