Merge pull request #685 from vaadin/fix/focusout-problem-edge

Fix problem with focusout happening when clicking on scroll bar on Edge

src/vaadin-combo-box-dropdown.html

@@ -19,7 +19,7 @@
         display: none;
       }
     </style>
-    <vaadin-combo-box-overlay id="overlay" hidden$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0">
+    <vaadin-combo-box-overlay id="overlay" hidden$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0;">
       <slot></slot>
     </vaadin-combo-box-overlay>
   </template>

src/vaadin-combo-box-mixin.html

@@ -200,6 +200,11 @@
       super.ready();
 
       this.addEventListener('focusout', e => {
+        // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
+        if (e.relatedTarget === this.$.overlay.$.dropdown.$.overlay) {
+          e.composedPath()[0].focus();
+          return;
+        }
         if (!this._closeOnBlurIsPrevented) {
           this.close();
         }

test/scrolling.html

@@ -100,6 +100,24 @@
             done();
           }, 1);
         });
+
+        it('should not close the items when touching scroll bar', () => {
+          combobox.open();
+          const e = new CustomEvent('focusout', {bubbles: true, composed: true});
+          e.relatedTarget = combobox.$.overlay.$.dropdown.$.overlay;
+          combobox.inputElement.dispatchEvent(e);
+
+          expect(combobox.opened).to.be.true;
+        });
+
+        it('should keep the input focused while scrolling', () => {
+          combobox.open();
+          const e = new CustomEvent('focusout', {bubbles: true, composed: true});
+          e.relatedTarget = combobox.$.overlay.$.dropdown.$.overlay;
+          combobox.inputElement.dispatchEvent(e);
+
+          expect(combobox.inputElement.hasAttribute('focused')).to.be.true;
+        });
       });
     });
   </script>