Add focus and blur methods, focused property

Fixes #349
vaadin · Feb 9, 2017 · 87ecbe6 · 87ecbe6
1 parent 41b9ea4
commit 87ecbe6
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/test/vaadin-combo-box-properties.html b/test/vaadin-combo-box-properties.html
@@ -192,6 +192,64 @@
           expect(comboBox.selectedItem).to.be.null;
         });
       });
+
+      describe('focus API', function() {
+        it('should have readOnly focused property', function() {
+          comboBox.focused = true;
+          expect(comboBox.focused).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+        });
+
+        it('should not be focused by default', function() {
+          expect(comboBox.focused).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+        });
+
+        it('should focus the input with focus method', function() {
+          var inputFocusCalled = false;
+
+          // Avoid FF window focus issues by stubing native focus behavior
+          sinon.stub(comboBox.$.input, 'focus', function() {
+            inputFocusCalled = true;
+            comboBox.$.input.fire('focus');
+          });
+
+          var focusedChangedSpy = sinon.spy();
+          comboBox.addEventListener('focused-changed', focusedChangedSpy);
+
+          comboBox.focus();
+
+          expect(inputFocusCalled).to.be.true;
+          expect(comboBox.focused).to.be.true;
+          expect(comboBox.hasAttribute('focused')).to.be.true;
+          expect(focusedChangedSpy.called).to.be.true;
+        });
+
+        it('should blur the input with the blur method', function() {
+          var inputBlurCalled = false;
+
+          // Avoid FF window focus issues by stubing native focus behavior
+          sinon.stub(comboBox.$.input, 'focus', function() {
+            comboBox.$.input.fire('focus');
+          });
+          sinon.stub(comboBox.$.input, 'blur', function() {
+            inputBlurCalled = true;
+            comboBox.$.input.fire('blur');
+          });
+
+          comboBox.focus();
+
+          var focusedChangedSpy = sinon.spy();
+          comboBox.addEventListener('focused-changed', focusedChangedSpy);
+
+          comboBox.blur();
+
+          expect(inputBlurCalled).to.be.true;
+          expect(comboBox.focused).to.be.false;
+          expect(comboBox.hasAttribute('focused')).to.be.false;
+          expect(focusedChangedSpy.called).to.be.true;
+        });
+      });
     });
   </script>
 

diff --git a/vaadin-combo-box.html b/vaadin-combo-box.html
@@ -347,8 +347,22 @@
 
       size: {
         type: Number
+      },
+
+      /**
+       * True when the input field has focus.
+       */
+      focused: {
+        type: Boolean,
+        value: false,
+        readOnly: true,
+        reflectToAttribute: true,
+        notify: true
       }
+    },
 
+    listeners: {
+      'inputContainer.focused-changed': '_onInputContainerFocusedChanged'
     },
 
     attached: function() {
@@ -374,6 +388,28 @@
 
     _getAriaExpanded: function(value) {
       return value.toString();
+    },
+
+    /**
+     * Sets focus on the input field.
+     */
+    focus: function() {
+      this.$.input.focus();
+    },
+
+    /**
+     * Removes focus from the input field.
+     */
+    blur: function() {
+      this.$.input.blur();
+    },
+
+    _onInputFocus: function() {
+      this._setFocused(true);
+    },
+
+    _onInputContainerFocusedChanged: function(e) {
+      this._setFocused(e.detail.value);
     }
   });