fix: dialog overlay scrolling (#168) (#170)

vaadin · Jun 18, 2020 · dd9b9cf · dd9b9cf
1 parent cdb11f4
commit dd9b9cf
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html
@@ -4,23 +4,24 @@
       [part='overlay'] {
         position: relative;
         overflow: visible;
-      }
-
-      /* Hack for iOS to make the overlay take full size */
-      [part='overlay'][style] {
+        max-height: 100%;
         display: flex;
         flex-direction: column;
       }
 
       [part='content'] {
         box-sizing: border-box;
-        height: 100%;
+        min-height: 100%;
       }
 
       .resizer-container {
+        overflow: auto;
+        flex-grow: 1;
+      }
+
+      [part='overlay'][style] .resizer-container {
         height: 100%;
         width: 100%;
-        overflow: auto;
       }
 
       :host(:not([resizable])) .resizer {
@@ -89,6 +90,12 @@
         left: -4px;
         cursor: nwse-resize;
       }
+
+      /* IE11 -only CSS */
+      _:-ms-fullscreen,
+      [part='overlay'] {
+        max-height: none;
+      }
     </style>
   </template>
 </dom-module>

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -9,5 +9,8 @@
     "gemini": false,
     "sinon": false,
     "MockInteractions": false
+  },
+  "parserOptions": {
+    "ecmaVersion": 8
   }
 }
diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
@@ -107,6 +107,22 @@
         dispatchMouseEvent(target, 'mouseup', toXY, mouseButton);
       }
 
+      // This is needed to ensure styles on iOS 10 Safari catch up after resize.
+      function contentStabilized(dialog) {
+        return new Promise((resolve) => {
+          const check = () => {
+            const resizedBounds = dialog.$.overlay.$.overlay.getBoundingClientRect();
+            const contentPartBounds = dialog.$.overlay.$.content.getBoundingClientRect();
+            if (Math.floor(resizedBounds.height) === Math.floor(contentPartBounds.height)) {
+              resolve();
+            } else {
+              setTimeout(check, 1);
+            }
+          };
+          check();
+        });
+      }
+
       describe('helper methods', () => {
         var dialogs, dialog1, dialog2, overlay, overlayPart, container;
 
@@ -261,8 +277,10 @@
           expect(Math.floor(resizedBounds.height)).to.be.eql(Math.floor(bounds.height));
         });
 
-        it('should resize content part when the overlay is resized', () => {
+        it('should resize content part when the overlay is resized', async() => {
           resize(overlayPart.querySelector('.w'), -dx, 0);
+          await contentStabilized(dialog);
+
           const resizedBounds = overlayPart.getBoundingClientRect();
           const contentPartBounds = dialog.$.overlay.$.content.getBoundingClientRect();
           expect(Math.floor(resizedBounds.top)).to.be.eql(Math.floor(contentPartBounds.top));
@@ -271,6 +289,33 @@
           expect(Math.floor(resizedBounds.height)).to.be.eql(Math.floor(contentPartBounds.height));
         });
 
+        it('should resize content part when the overlay is expanded vertically', async() => {
+          resize(overlayPart.querySelector('.s'), 0, 10);
+          await contentStabilized(dialog);
+
+          const resizedBounds = overlayPart.getBoundingClientRect();
+          const contentPartBounds = dialog.$.overlay.$.content.getBoundingClientRect();
+          expect(Math.floor(resizedBounds.height)).to.be.eql(Math.floor(contentPartBounds.height));
+        });
+
+        it('should scroll if the content overflows', () => {
+          // Fill the content with a lot of text so that it overflows the viewport
+          dialog.$.overlay.firstElementChild.textContent = Array(...new Array(10000)).map(() => 'foo').join(' ');
+
+          const resizeContainer = dialog.$.overlay.$.resizerContainer;
+          resizeContainer.scrollTop = 1;
+          expect(resizeContainer.scrollTop).to.equal(1);
+        });
+
+        it('should expand content if it overflows the overlay', () => {
+          // Fill the content with a lot of text so that it overflows the viewport
+          dialog.$.overlay.firstElementChild.textContent = Array(...new Array(10000)).map(() => 'foo').join(' ');
+
+          const overlayBounds = overlayPart.getBoundingClientRect();
+          const contentPartBounds = dialog.$.overlay.$.content.getBoundingClientRect();
+          expect(contentPartBounds.height).to.be.above(overlayBounds.height);
+        });
+
         it('should not resize dialog if not left mouse button', () => {
           resize(overlayPart.querySelector('.w'), -dx, 0, 1);
           const resizedBounds = overlayPart.getBoundingClientRect();
@@ -317,13 +362,14 @@
           expect(dialog._setBounds).to.be.calledOnce;
         });
 
-        it('should dispatch resize event with correct details', () => {
+        it('should dispatch resize event with correct details', async() => {
           const onResize = sinon.spy();
           const content = dialog.$.overlay.$.content;
           let detail = {};
           dialog.addEventListener('resize', onResize);
           dialog.addEventListener('resize', (e) => (detail = e.detail));
           resize(overlayPart.querySelector('.w'), -dx, 0);
+          await contentStabilized(dialog);
 
           const resizedBounds = overlayPart.getBoundingClientRect();
           const contentStyles = getComputedStyle(content);