fix: restore scroll position, improve tests

vaadin · Jul 23, 2020 · 3617432 · 3617432
1 parent cec252a
commit 3617432
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 24 deletions.
diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html
@@ -152,6 +152,7 @@
 
         if (e.button === 0 || e.touches) {
           e.preventDefault();
+          this.__saveScrollPosition();
           this._originalBounds = this._getOverlayBounds();
           const event = this.__getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = {top: event.pageY, left: event.pageX};
@@ -208,6 +209,7 @@
               }
             }
           });
+          this.__forceSafariReflow();
           this.$.overlay.notifyResize();
         }
       }
@@ -222,6 +224,7 @@
         window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);
         window.removeEventListener('touchend', this._resizeListeners.stop[direction]);
         this.dispatchEvent(new CustomEvent('resize', {detail: this._getResizeDimensions()}));
+        this.__restoreScrollPosition();
       }
 
       /**
@@ -236,5 +239,30 @@
         content.removeAttribute('style');
         return {width, height, contentWidth, contentHeight};
       }
+
+      /**
+       * Safari 13 renders overflowing elements incorrectly.
+       * This forces it to recalculate height.
+       * @private
+       */
+      __forceSafariReflow() {
+        const overlay = this.$.overlay.$.overlay;
+        // Force reflow in Safari 13 to recalculate height
+        overlay.style.display = 'block';
+        window.requestAnimationFrame(() => {
+          overlay.style.display = '';
+          this.__restoreScrollPosition();
+        });
+      }
+
+      /** @private */
+      __saveScrollPosition() {
+        this.__scrollTop = this.$.overlay.$.resizerContainer.scrollTop;
+      }
+
+      /** @private */
+      __restoreScrollPosition() {
+        this.$.overlay.$.resizerContainer.scrollTop = this.__scrollTop;
+      }
     };
 </script>
diff --git a/src/vaadin-dialog.html b/src/vaadin-dialog.html
@@ -401,12 +401,6 @@
           }
 
           Object.assign(overlay.style, parsedBounds);
-
-          // Force reflow in Safari 13 to recalculate height
-          overlay.style.display = 'block';
-          window.requestAnimationFrame(() => {
-            overlay.style.display = '';
-          });
         }
 
         /** @private */

diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
@@ -82,7 +82,7 @@
 
   <test-fixture id="overflow">
     <template>
-      <vaadin-dialog draggable opened modeless>
+      <vaadin-dialog resizable opened modeless>
         <template>
         </template>
       </vaadin-dialog>
@@ -740,37 +740,46 @@
       });
 
       describe('dialog with overflowing content', () => {
-        let dialog;
+        let dialog, overlay, overlayPart, container;
 
         beforeEach(() => {
           dialog = fixture('overflow');
+          overlay = dialog.$.overlay;
+          overlayPart = overlay.$.overlay;
+          container = overlay.$.resizerContainer;
         });
 
         it('should not overflow when style attribute is set on the overlay part', () => {
-          const container = document.createElement('div');
-          container.style.maxWidth = '300px';
-          container.style.overflow = 'auto';
-          container.textContent = Array(100).join('Lorem ipsum dolor sit amet');
-          const overlay = dialog.$.overlay;
-          overlay.content.appendChild(container);
+          const div = document.createElement('div');
+          div.style.maxWidth = '300px';
+          div.style.overflow = 'auto';
+          div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
+          overlay.content.appendChild(div);
           // emulate removing "pointer-events: none"
-          overlay.$.overlay.setAttribute('style', '');
-          expect(overlay.$.overlay.offsetHeight).to.equal(overlay.$.resizerContainer.offsetHeight);
+          overlayPart.setAttribute('style', '');
+          expect(overlayPart.offsetHeight).to.equal(container.offsetHeight);
         });
 
-        it('should not overflow when using vaadin-textarea in the content', (done) => {
+        it('should not overflow when using vaadin-textarea in the content', async() => {
           const textarea = document.createElement('vaadin-text-area');
           textarea.value = Array(20).join('Lorem ipsum dolor sit amet');
-          const overlay = dialog.$.overlay;
           overlay.content.appendChild(textarea);
           overlay.$.content.style.padding = '20px';
-          // emulate resizing the dialog
-          dialog._setBounds({height: 50});
+          resize(overlayPart.querySelector('.s'), 0, -50);
+          await contentStabilized(dialog);
+          expect(getComputedStyle(overlayPart).height).to.equal(getComputedStyle(container).height);
+        });
 
-          window.requestAnimationFrame(() => {
-            expect(getComputedStyle(overlay.$.overlay).height).to.equal(getComputedStyle(overlay.$.resizerContainer).height);
-            done();
-          });
+        it('should not reset scroll position on resize', async() => {
+          const div = document.createElement('div');
+          div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
+          overlay.content.appendChild(div);
+          dialog._setBounds({height: 200});
+          overlay.$.content.style.padding = '20px';
+          container.scrollTop = 100;
+          resize(overlayPart.querySelector('.s'), 0, -50);
+          await contentStabilized(dialog);
+          expect(container.scrollTop).to.equal(100);
         });
       });
   </script>