add tabindex example, some focus handler fixes

googlearchive · Jul 23, 2014 · 82c419e · 82c419e
1 parent df1e12f
commit 82c419e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/core-input.html b/core-input.html
@@ -229,7 +229,7 @@
       },
 
       ready: function() {
-        this.tabindexChanged(this.getAttribute('tabindex'));
+        this.handleTabindex(this.getAttribute('tabindex'));
       },
 
       validateValue: function() {
@@ -275,11 +275,11 @@
 
       attributeChanged: function(attr, oldVal, curVal) {
         if (attr === 'tabindex') {
-          this.tabindexChanged(curVal);
+          this.handleTabindex(curVal);
         }
       },
 
-      tabindexChanged: function(tabindex) {
+      handleTabindex: function(tabindex) {
         if (tabindex > 0) {
           this.$.input.setAttribute('tabindex', -1);
         } else {
@@ -299,23 +299,32 @@
       inputChangeAction: function() {
         this.commit();
         if (!window.ShadowDOMPolyfill) {
-          // re-fire non-bubbling event
-          this.fire('change', null, this, false);
+          // re-fire event that does not bubble across shadow roots
+          this.fire('change', null, this);
         }
       },
 
-      focusAction: function() {
-        this.$.input.focus();
+      focusAction: function(e) {
+        if (this.getAttribute('tabindex') > 0) {
+          // Forward focus to the inner input if tabindex is set on the element
+          // This will not cause an infinite loop because focus will not fire on the <input>
+          // again if it's already focused.
+          this.$.input.focus();
+        }
       },
 
-      inputFocusAction: function() {
-        // re-fire non-bubbling event
-        this.fire('focus', null, this, false);
+      inputFocusAction: function(e) {
+        if (window.ShadowDOMPolyfill) {
+          // re-fire non-bubbling event if polyfill
+          this.fire('focus', null, this, false);
+        }
       },
 
       inputBlurAction: function() {
-        // re-fire non-bubbling event
-        this.fire('blur', null, this, false);
+        if (window.ShadowDOMPolyfill) {
+          // re-fire non-bubbling event
+          this.fire('blur', null, this, false);
+        }
       },
 
       blur: function() {

diff --git a/demo.html b/demo.html
@@ -101,4 +101,15 @@
     <core-input class="sized" multiline rows="fit" placeholder="This input is 500px * 200px"></core-input>
   </section>
 
+  <section horizontal start layout>
+    <aside>This is an example of input fields with <code>tabindex</code> attribute.</aside>
+    <div>
+      <core-input tabindex="2" placeholder="tabindex = 2"></core-input>
+      <br>
+      <core-input tabindex="3" placeholder="tabindex = 3"></core-input>
+      <br>
+      <core-input tabindex="1" placeholder="tabindex = 1"></core-input>
+    </div>
+  </section>
+
 </body>