Merge 6c5a8f9 into 46cde4a

vaadin · Jun 28, 2019 · 325dbc2 · 325dbc2
2 parents 46cde4a + 6c5a8f9
commit 325dbc2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -326,13 +326,9 @@
 
       if (this.opened) {
         this._openedWithFocusRing = this.hasAttribute('focus-ring') || (this.focusElement && this.focusElement.hasAttribute('focus-ring'));
-        // For touch devices, we don't want to popup virtual keyboard on touch devices unless input
-        // is explicitly focused by the user.
-        if (!this.$.overlay.touchDevice) {
-          // Check to see if there is a focused property and if it's already true.
-          if (!this.focused) {
-            this.focus();
-          }
+        // For touch devices, we don't want to popup virtual keyboard unless input is explicitly focused by the user.
+        if (!this.hasAttribute('focused') && !this.$.overlay.touchDevice) {
+          this.focus();
         }
       } else {
         this._onClosed();
@@ -513,6 +509,12 @@
       if (toggleElement) {
         // Don't blur the input on toggle mousedown
         toggleElement.addEventListener('mousedown', e => e.preventDefault());
+        // Unfocus previously focused element if focus is not inside combo box (on touch devices)
+        toggleElement.addEventListener('click', e => {
+          if (this.$.overlay.touchDevice && !this.hasAttribute('focused')) {
+            document.activeElement.blur();
+          }
+        });
       }
     }
 

diff --git a/test/toggling-dropdown.html b/test/toggling-dropdown.html
@@ -47,7 +47,6 @@
 <script>
   describe('toggling the dropdown', () => {
     let combobox;
-    let comboboxLight;
 
     function clickToggleIcon() {
       fireMousedownMouseupClick(combobox._toggleElement);
@@ -59,7 +58,6 @@
 
     beforeEach(() => {
       combobox = fixture('combobox');
-      comboboxLight = fixture('combobox-light');
     });
 
     describe('opening', () => {
@@ -215,9 +213,11 @@
           });
 
           it('should prevent default on overlay mousedown (vaadin-combo-box-light)', () => {
+            combobox = fixture('combobox-light');
+
             const preventDefaultSpy = sinon.spy();
-            comboboxLight.open();
-            comboboxLight.$.overlay.$.dropdown.$.overlay.dispatchEvent(createMouseDown(preventDefaultSpy));
+            combobox.open();
+            combobox.$.overlay.$.dropdown.$.overlay.dispatchEvent(createMouseDown(preventDefaultSpy));
 
             expect(preventDefaultSpy).to.have.been.called;
           });
@@ -363,6 +363,24 @@
         expect(dropdown.$).to.be.ok;
       });
     });
+
+    describe('external focus (initially)', () => {
+      let input, blurSpy;
+
+      beforeEach(() => {
+        input = document.createElement('input');
+        combobox.insertAdjacentElement('beforebegin', input);
+        input.focus();
+        blurSpy = sinon.spy(input, 'blur');
+      });
+
+      if (touchDevice) {
+        it('should blur previously focused element when clicking on toggle button', () => {
+          clickToggleIcon();
+          expect(blurSpy).to.be.called;
+        });
+      }
+    });
   });
 </script>