Implement tabindex. Fixes #401

vaadin · Jul 26, 2017 · 6c31c07 · 6c31c07
1 parent a9dd23e
commit 6c31c07
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -38,6 +38,17 @@ <h3>Configuring the Combo Box</h3>
       </template>
     </demo-snippet>
 
+    <h3>TabIndex</h3>
+
+    <demo-snippet>
+      <template>
+        <vaadin-combo-box tabindex="4" placeholder="TabIndex 4"></vaadin-combo-box>
+        <vaadin-combo-box tabindex="3" placeholder="TabIndex 3"></vaadin-combo-box>
+        <vaadin-combo-box tabindex="2" placeholder="TabIndex 2 disabled" disabled></vaadin-combo-box>
+        <vaadin-combo-box tabindex="1" placeholder="TabIndex 1"></vaadin-combo-box>
+      </template>
+    </demo-snippet>
+
     <h3>Selecting a Value</h3>
     <demo-snippet>
       <template>

diff --git a/vaadin-combo-box.html b/vaadin-combo-box.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="../vaadin-text-field/vaadin-text-field.html">
+<link rel="import" href="../vaadin-control-state-mixin/vaadin-control-state-mixin.html">
 <link rel="import" href="../vaadin-themable-mixin/vaadin-themable-mixin.html">
 <link rel="import" href="vaadin-combo-box-mixin.html">
 <link rel="import" href="vaadin-combo-box-overlay.html">
@@ -163,7 +164,7 @@
        * @mixes Vaadin.ThemableMixin
        * @demo demo/index.html
        */
-      class ComboBoxElement extends Vaadin.ThemableMixin(Vaadin.ComboBoxMixin(Polymer.Element)) {
+      class ComboBoxElement extends Vaadin.ControlStateMixin(Vaadin.ThemableMixin(Vaadin.ComboBoxMixin(Polymer.Element))) {
 
         static get is() {
           return 'vaadin-combo-box';
@@ -334,11 +335,19 @@
           this.inputElement.focus();
         }
 
+        /**
+         * Focussable element used by vaadin-control-state-mixin
+         */
+        get focusElement() {
+          // inputElement might not be defined on property changes before ready.
+          return this.inputElement || this;
+        }
+
         /**
          * Removes focus from the input field.
          */
         blur() {
-          this.inputElement.blur();
+          this.inputElement && this.inputElement.blur();
         }
 
         _onInputContainerFocusedChanged(e) {