JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="https://brianreavis.github.io/selectize.js/css/selectize.default.css">
<body>
<section>
<label for="input-tags1">Tags:</label>
<input tabindex="1" type="text" id="input-tags1" class="demo-default" value="awesome,neat">
</section>
<section>
<label for="input-tags2">Tags:</label>
<input tabindex="1" type="text" id="input-tags2" class="demo-default" value="awesome,neat">
</section>
</body>
JavaScript
Selectize.prototype.onBlur = function(){
var self = this;
if (!self.isFocused) return;
self.isFocused = false;
if (self.ignoreFocus) {
return;
} else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
// necessary to prevent IE closing the dropdown when the scrollbar is clicked
self.ignoreBlur = true;
self.onFocus(e);
return;
}
var deactivate = function() {
self.close();
self.setTextboxValue('');
self.setActiveItem(null);
self.setActiveOption(null);
self.setCaret(self.items.length);
self.refreshState();
// IE11 bug: element still marked as active
//(dest || document.body).focus();
self.ignoreFocus = false;
self.trigger('blur');
};
self.ignoreFocus = true;
if (self.settings.create && self.settings.createOnBlur) {
self.createItem(null, false, deactivate);
} else {
deactivate();
}
}
$(function(){
$('#input-tags1').selectize({
delimiter: ',',
persist: false
});
$('#input-tags2').selectize({
delimiter: ',',
persist: false
});
console.log('done');
});