diff --git a/test/vaadin-combo-box-properties.html b/test/vaadin-combo-box-properties.html index d1090a307..b1546973d 100644 --- 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; + }); + }); }); diff --git a/vaadin-combo-box.html b/vaadin-combo-box.html index 0aaebd577..149180eeb 100644 --- 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); } });