fix: The dialog is brought to front of date-picker and combo-box#148 (#…

…705)
vaadin · Mar 11, 2020 · eed0132 · eed0132
1 parent 496b2cf
commit eed0132
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -57,7 +57,8 @@
     "sugar": "2.0.4",
     "web-component-tester": "^6.1.5",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
-    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.0.0"
+    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.0.0",
+    "vaadin-dialog": "^2.2.1"
   },
   "resolutions": {
     "vaadin-element-mixin": "^2.0.0"

diff --git a/src/vaadin-date-picker-mixin.html b/src/vaadin-date-picker-mixin.html
@@ -358,6 +358,17 @@
       this._overlayContent.addEventListener('focus', () => this.focusElement._setFocused(true));
 
       this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));
+
+      const bringToFrontListener = (e) => {
+        if (this.$.overlay.bringToFront) {
+          requestAnimationFrame(() => {
+            this.$.overlay.bringToFront();
+          });
+        }
+      };
+
+      this.addEventListener('mousedown', bringToFrontListener);
+      this.addEventListener('touchstart', bringToFrontListener);
     }
 
     /**

diff --git a/test/overlay.html b/test/overlay.html
@@ -10,6 +10,8 @@
   <link rel="import" href="../../test-fixture/test-fixture.html">
 
   <link rel="import" href="../src/vaadin-date-picker-overlay-content.html">
+  <link rel="import" href="../src/vaadin-date-picker.html">
+  <link rel="import" href="../../vaadin-dialog/src/vaadin-dialog.html">
   <link rel="import" href="../../polymer/lib/utils/render-status.html">
 </head>
 
@@ -21,6 +23,16 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="in-modeless-dialog">
+    <template>
+      <vaadin-dialog modeless>
+        <template>
+          <vaadin-date-picker></vaadin-date-picker>
+        </template>
+      </vaadin-dialog>
+    </template>
+  </test-fixture>
+
   <script>
     function waitUntilScrolledTo(overlay, date, callback) {
       if (overlay.$.monthScroller.position) {
@@ -347,6 +359,54 @@
         });
       });
     });
+
+    describe('frontmost', () => {
+      var dialog;
+      beforeEach(() => {
+        dialog = fixture('in-modeless-dialog');
+      });
+
+      function touchstart(node) {
+        const event = new CustomEvent('touchstart', {bubbles: true, cancelable: true});
+
+        const nodeRect = node.getBoundingClientRect();
+        const clientX = nodeRect.left;
+        const clientY = nodeRect.top;
+
+        event.touches = event.changedTouches = event.targetTouches = [{clientX, clientY}];
+        node.dispatchEvent(event);
+      }
+
+      it('should not end up behind the dialog overlay on mousedown', (done) => {
+        dialog.opened = true;
+        const dialogOverlay = dialog.$.overlay;
+        const datePicker = dialog.$.overlay.querySelector('vaadin-date-picker');
+        const datePickerOverlay = datePicker.$.overlay;
+
+        datePicker.opened = true;
+
+        datePicker.dispatchEvent(new CustomEvent('mousedown', {bubbles: true, composed: true}));
+        requestAnimationFrame(() => {
+          expect(datePickerOverlay._last).to.be.true;
+          done();
+        });
+      });
+
+      it('should not end up behind the dialog overlay on touchstart', (done) => {
+        dialog.opened = true;
+        const dialogOverlay = dialog.$.overlay;
+        const datePicker = dialog.$.overlay.querySelector('vaadin-date-picker');
+        const datePickerOverlay = datePicker.$.overlay;
+
+        datePicker.opened = true;
+
+        touchstart(datePicker);
+        requestAnimationFrame(() => {
+          expect(datePickerOverlay._last).to.be.true;
+          done();
+        });
+      });
+    });
   </script>
 
 </body>