IE11 tabindex inside selectize-control element is set to large negative number. Causes tabbing issues

[eaglei22]

I am using ASP.NET MVC 4 with Bootstrap v3.3.7. I am having issues with tabbing inside of IE 11 but not Firefox. In IE11 the tabbing will go to the selectize attached dropdown element, and then reset to the first tabbed item on further tabbing. This will repeat when tabbing starts on an item preceding the selectize attached item. Investigating, I noticed inside IE11 the tabindex was set to -32768.

I did try the fix from #877 on an older version I had gotten off NUGET, and this did not fix my probem. This issues seems to happen with the latest version and older versions of the standalone selectize.js script.

This is a snapshot from the DOM Explorer in IE 11:

<div class="selectize-control form-control single">
    <div class="selectize-input items not-full has-options  focus input-active dropdown-active">
      <input tabindex="-32768" style="left: 0px; width: 42.92px; position: relative; opacity: 1;" type="text"  placeholder="Select" autocomplete="off">
    </div>
    <div class="selectize-dropdown single form-control" style="left: 0px; top: 34px; width: 247.69px; display: block; visibility: visible;">
      <div class="selectize-dropdown-content">
        <div class="option active" data-value="A" data-selectable="">Serviceable</div>
        <div class="option" data-value="F" data-selectable="">Unserviceable</div>
        <div class="option" data-value="V" data-selectable="">Vendor</div>
        <div class="option" data-value="S" data-selectable="">Scrap</div>
    </div>  
   </div>
</div>

I noticed in Firefox the tabindex value inside the same div was set to empty (tabindex="").

I was able to get it working by making the change below:

	/**
		 * Completely destroys the control and
		 * unbinds all event listeners so that it can
		 * be garbage collected.
		 */
		destroy: function() {
			var self = this;
			var eventNS = self.eventNS;
			var revertSettings = self.revertSettings;
	
			self.trigger('destroy');
			self.off();
			self.$wrapper.remove();
			self.$dropdown.remove();
	
			self.$input
				.html('')
				.append(revertSettings.$children)
				.removeAttr('tabindex')
				.removeClass('selectized')

                                 //IE11 BUG FIX
				//.attr({tabindex: revertSettings.tabindex})
                                .attr({tabindex: ""})
				.show();
	
			self.$control_input.removeData('grow');
			self.$input.removeData('selectize');
	
			$(window).off(eventNS);
			$(document).off(eventNS);
			$(document.body).off(eventNS);
	
			delete self.$input[0].selectize;
		},

This resolved my issue and works perfectly on IIS for both IE11 and Firefox.

I tried duplicating this on JSFiddle and could not as it is too complex to duplicate the environment this issue is happening in. The current layout I am using is a bootstrap navbar, tabbed menu, and a grid to structure the form; my form is in a partial view.

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.