Updated master with current bug fixes. Will officially release soon

index.html

@@ -345,8 +345,8 @@
     <option value="a Stateful UI Widget" data-preventclose="true">a Stateful UI Widget</option>
     </optgroup>
   </select>
-  <select name="" id="" data-size="3"></select>
-  <select name="dm_status_id" id="dm_status_id" size="1">
+  <select name="" id=""></select>
+  <select name="dm_status_id" id="dm_status_id" data-size="1">
     <option value="">Any DM Status</option>
     <option value="1">DM-Approved</option>
     <option value="2">DM-Denied</option>
@@ -355,6 +355,8 @@
   </select>
 </form>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+
 <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script src="./src/javascripts/jquery.selectBoxIt.js"></script>
@@ -366,7 +368,7 @@
 
   //var select = $("select").selectBoxIt({ populate: '<option value="test">test</option>' }).data('selectBox-selectBoxIt').remove(0);
 
-  $('select').selectBoxIt({ theme: 'jqueryui' });
+  $('select').selectBoxIt({ native: true });
 
   // $('select').last().selectBoxIt({
   //   defaultText: "Greg Franko Repos",

src/javascripts/jquery.selectBoxIt.core.js

@@ -587,9 +587,9 @@
             self.dropdownContainer.append(self.list);
 
             // Stores the individual dropdown list options inside of the `listItems` instance variable
-            self.listItems = self.list.children('li');
+            self.listItems = self.list.children("li");
 
-            self.listAnchors = self.list.children("a");
+            self.listAnchors = self.list.find("a");
 
             // Sets the 'selectboxit-option-first' class name on the first drop down option
             self.listItems.first().addClass("selectboxit-option-first");
@@ -1299,14 +1299,22 @@
                     // Allows the dropdown list options list to close
                     self.blur = true;
 
+                },
+
+                // `focusin` event with the `selectBoxIt` namespace
+                "focusin.selectBoxIt": function() {
+
+                    // Prevents the default browser outline border to flicker, which results because of the `blur` event
+                    self.dropdown.trigger("focus", true);
+
                 }
 
             });
 
             // Select box individual options events bound with the jQuery `delegate` method.  `Delegate` was used because binding indropdownidual events to each list item (since we don't know how many there will be) would decrease performance.  Instead, we bind each event to the unordered list, provide the list item context, and allow the list item events to bubble up (`event bubbling`). This greatly increases page performance because we only have to bind an event to one element instead of x number of elements. Delegates the `click` event with the `selectBoxIt` namespace to the list items
             self.list.on({
 
-                "click.selectBoxIt": function() {
+                "mousedown.selectBoxIt": function() {
 
                     self._update($(this));
 
@@ -1320,6 +1328,12 @@
 
                     }
 
+                    setTimeout(function() {
+
+                        self.dropdown.trigger('focus', true);
+
+                    }, 0);
+
                 },
 
                // Delegates the `focusin` event with the `selectBoxIt` namespace to the list items

src/javascripts/jquery.selectBoxIt.js

@@ -587,9 +587,9 @@
             self.dropdownContainer.append(self.list);
 
             // Stores the individual dropdown list options inside of the `listItems` instance variable
-            self.listItems = self.list.children('li');
+            self.listItems = self.list.children("li");
 
-            self.listAnchors = self.list.children("a");
+            self.listAnchors = self.list.find("a");
 
             // Sets the 'selectboxit-option-first' class name on the first drop down option
             self.listItems.first().addClass("selectboxit-option-first");
@@ -1299,14 +1299,22 @@
                     // Allows the dropdown list options list to close
                     self.blur = true;
 
+                },
+
+                // `focusin` event with the `selectBoxIt` namespace
+                "focusin.selectBoxIt": function() {
+
+                    // Prevents the default browser outline border to flicker, which results because of the `blur` event
+                    self.dropdown.trigger("focus", true);
+
                 }
 
             });
 
             // Select box individual options events bound with the jQuery `delegate` method.  `Delegate` was used because binding indropdownidual events to each list item (since we don't know how many there will be) would decrease performance.  Instead, we bind each event to the unordered list, provide the list item context, and allow the list item events to bubble up (`event bubbling`). This greatly increases page performance because we only have to bind an event to one element instead of x number of elements. Delegates the `click` event with the `selectBoxIt` namespace to the list items
             self.list.on({
 
-                "click.selectBoxIt": function() {
+                "mousedown.selectBoxIt": function() {
 
                     self._update($(this));
 
@@ -1320,6 +1328,12 @@
 
                     }
 
+                    setTimeout(function() {
+
+                        self.dropdown.trigger('focus', true);
+
+                    }, 0);
+
                 },
 
                // Delegates the `focusin` event with the `selectBoxIt` namespace to the list items
@@ -2883,6 +2897,8 @@ selectBoxIt._destroySelectBoxIt = function() {
         // Appends the native select box to the drop down (allows for relative positioning using the position() method)
         self.dropdownContainer.append(self.selectBox);
 
+        self.dropdown.attr('tabindex', '-1');
+
         // Positions the original select box directly over top the new dropdown list using position absolute and "hides" the original select box using an opacity of 0.  This allows the mobile browser "wheel" interface for better usability.
         self.selectBox.css({
 

src/javascripts/jquery.selectBoxIt.mobile.js

@@ -17,6 +17,8 @@
         // Appends the native select box to the drop down (allows for relative positioning using the position() method)
         self.dropdownContainer.append(self.selectBox);
 
+        self.dropdown.attr('tabindex', '-1');
+
         // Positions the original select box directly over top the new dropdown list using position absolute and "hides" the original select box using an opacity of 0.  This allows the mobile browser "wheel" interface for better usability.
         self.selectBox.css({