Fix tabbing behavior in iOS

coffee/select.coffee

@@ -49,7 +49,7 @@ document.addEventListener 'keypress', (e) ->
     # They hit the same char over and over, maybe they want to cycle through
     # the options that start with that char
     repeatedOptions = select.findOptionsByPrefix(searchText[0])
-    
+
     if repeatedOptions.length
       selected = repeatedOptions.indexOf select.getChosen()
 
@@ -67,7 +67,7 @@ document.addEventListener 'keypress', (e) ->
     return
 
   # No match at all, do nothing
-  
+
 document.addEventListener 'keydown', (e) ->
   # We consider this independently of the keypress handler so we can intercept keys that have
   # built-in functions.
@@ -108,7 +108,7 @@ class Select extends Evented
     @renderDrop()
 
     @setupSelect()
-    
+
     @setupTether()
     @bindClick()
 
@@ -123,8 +123,12 @@ class Select extends Evented
 
     addClass @target, 'select-target'
 
-    tabIndex = @select.getAttribute('tabindex') or 0
-    @target.setAttribute 'tabindex', tabIndex
+    if @useNative()
+      # Only allow tabbing on the native <select>
+      @target.setAttribute 'tabindex', -1
+    else
+      tabIndex = @select.getAttribute('tabindex') or 0
+      @target.setAttribute 'tabindex', tabIndex
 
     if @options.className
       addClass @target, @options.className
@@ -293,7 +297,10 @@ class Select extends Evented
   setupSelect: ->
     @select.selectInstance = @
 
-    addClass @select, 'select-select'
+    if @useNative()
+      addClass @select, 'select-select-native'
+    else
+      addClass @select, 'select-select'
 
     @select.addEventListener 'change', =>
       @renderDrop()

css/select-theme-chosen.css

@@ -1,11 +1,12 @@
 .select-select {
-  display: none;
+  display: none; }
+
+.select-select-native {
   /* For when we are on a small touch device and want to use native controls */
-  -webkit-pointer-events: none;
-  -moz-pointer-events: none;
-  pointer-events: none;
   position: absolute;
-  opacity: 0; }
+  width: 0;
+  height: 0;
+  overflow: hidden; }
 
 .select-element, .select-element:after, .select-element:before, .select-element *, .select-element *:after, .select-element *:before {
   -webkit-box-sizing: border-box;

css/select-theme-dark.css

@@ -1,11 +1,12 @@
 .select-select {
-  display: none;
+  display: none; }
+
+.select-select-native {
   /* For when we are on a small touch device and want to use native controls */
-  -webkit-pointer-events: none;
-  -moz-pointer-events: none;
-  pointer-events: none;
   position: absolute;
-  opacity: 0; }
+  width: 0;
+  height: 0;
+  overflow: hidden; }
 
 .select-element, .select-element:after, .select-element:before, .select-element *, .select-element *:after, .select-element *:before {
   -webkit-box-sizing: border-box;

css/select-theme-default.css

@@ -1,11 +1,12 @@
 .select-select {
-  display: none;
+  display: none; }
+
+.select-select-native {
   /* For when we are on a small touch device and want to use native controls */
-  -webkit-pointer-events: none;
-  -moz-pointer-events: none;
-  pointer-events: none;
   position: absolute;
-  opacity: 0; }
+  width: 0;
+  height: 0;
+  overflow: hidden; }
 
 .select-element, .select-element:after, .select-element:before, .select-element *, .select-element *:after, .select-element *:before {
   -webkit-box-sizing: border-box;

sass/_select.sass

@@ -3,7 +3,9 @@
 .select-select
     display: none
 
+.select-select-native
     /* For when we are on a small touch device and want to use native controls */
-    +pointer-events(none)
     position: absolute
-    opacity: 0
+    width: 0
+    height: 0
+    overflow: hidden

select.js

@@ -1,5 +1,5 @@
 /*! select 0.4.8 */
-/*! tether 0.5.0 */
+/*! tether 0.5.2 */
 (function() {
   var Evented, addClass, defer, deferred, extend, flush, getBounds, getOffsetParent, getOrigin, getScrollParent, hasClass, node, removeClass, uniqueId, updateClasses, zeroPosCache,
     __hasProp = {}.hasOwnProperty,
@@ -612,7 +612,7 @@
             if (this.target !== document.body) {
               out.height = Math.max(out.height, 24);
             }
-            scrollPercentage = target.scrollTop / (target.scrollHeight - height);
+            scrollPercentage = this.target.scrollTop / (target.scrollHeight - height);
             out.top = scrollPercentage * (height - out.height - fitAdj) + bounds.top + parseFloat(style.borderTopWidth);
             if (this.target === document.body) {
               out.height = Math.max(out.height, 24);
@@ -814,7 +814,7 @@
         _ref4 = ['Top', 'Left', 'Bottom', 'Right'];
         for (_j = 0, _len1 = _ref4.length; _j < _len1; _j++) {
           side = _ref4[_j];
-          offsetBorder[side] = parseFloat(offsetParentStyle["border" + side + "Width"]);
+          offsetBorder[side.toLowerCase()] = parseFloat(offsetParentStyle["border" + side + "Width"]);
         }
         offsetPosition.right = document.body.scrollWidth - offsetPosition.left - offsetParentSize.width + offsetBorder.right;
         offsetPosition.bottom = document.body.scrollHeight - offsetPosition.top - offsetParentSize.height + offsetBorder.bottom;
@@ -1500,8 +1500,12 @@
       this.target = document.createElement('a');
       this.target.href = 'javascript:;';
       addClass(this.target, 'select-target');
-      tabIndex = this.select.getAttribute('tabindex') || 0;
-      this.target.setAttribute('tabindex', tabIndex);
+      if (this.useNative()) {
+        this.target.setAttribute('tabindex', -1);
+      } else {
+        tabIndex = this.select.getAttribute('tabindex') || 0;
+        this.target.setAttribute('tabindex', tabIndex);
+      }
       if (this.options.className) {
         addClass(this.target, this.options.className);
       }
@@ -1685,7 +1689,11 @@
     Select.prototype.setupSelect = function() {
       var _this = this;
       this.select.selectInstance = this;
-      addClass(this.select, 'select-select');
+      if (this.useNative()) {
+        addClass(this.select, 'select-select-native');
+      } else {
+        addClass(this.select, 'select-select');
+      }
       return this.select.addEventListener('change', function() {
         _this.renderDrop();
         return _this.renderTarget();