I've got the following functionality. When I click the button the sweetalert2 popup opens with the easyautocomplete list. The items are fetched by ajax while typing. When there are too much items and they don't fit in the box the scrollbar appears.
I wanted to use original easyatocomplete plugin from -> easyautocomplete.com <-
but it doesn't have scrollbar functionality.So I looked around and found modified version here:
http://gnnc.com.br/samples/easy-autocomplete/easy-autocomplete.php
The problem is when I click the scrollbar to scroll positions the scrollbar disappers and the list closes. The problem occurs only in IE (tested 11 and Edge), in FF and Chrome is OK.
BUT!! As we see in the demo on modified autocomplete page, the scrollbar works fine and doesn't dissappear even in IE after trying to scroll it with mouse. It seems like it happens only when used inside sweetalert2 popup.
Here is the code I wrote:
function addEmployeeByName() {
swal({
title: 'Add employee by name',
html: 'Select employee<input type="text" name="empList" id="empList" class="form-control"><input type="hidden" id="rcp">',
type: '',
confirmButtonText: 'Add employee',
confirmButtonColor: '#00A65A',
onOpen: function () {
window.setTimeout(function () {
$("input#empList").focus();
}, 0);
var options = {
url: function(phrase) {
return '/ajax/employees/get_handworkers_by_name/';
},
minCharNumber: 3,
ajaxSettings: {
dataType: "json",
method: "POST",
data: { dataType: "json" }
},
preparePostData: function(data)
{ data.employeename = $("#empList").val();
return data;
},
getValue: function(element) {
return '['+element.rcp+'] '+element.nazwisko+' '+element.imie;
},
requestDelay: 400,
list: {
maxNumberOfElements: 1000,
onChooseEvent: function() {
sel_prac_rcp = parseInt($("#empList").getSelectedItemData().rcp);
sel_prac_id = parseInt($("#empList").getSelectedItemData().id);
$("#empList").blur();
}
}
};
$("#empList").easyAutocomplete(options);
}, //end onOpen
}).then(function(val){
console.log(val);
});
}
I looked into modified easyautocomplete plugin and found this (around line 1240):
$container.on("mousedown", function(e) {
if (!$wrap.is(e.target) // if the target of the click isn't the container...
&& ($wrap.has(e.target).length === 0) // ... nor a descendant of the container
&& (e.target !== $('html').get(0))) // nor the scrollbar
{
//console.log('slog0');
//console.log('slog:'+toolbarClose());
}
//console.log('slog2');
e.stopImmediatePropagation();
e.preventDefault();
e.stopPropagation();
//if (jQuery.browser.msie) {
e.originalEvent.keyCode = 0;
e.originalEvent.cancelBubble = true;
e.originalEvent.returnValue = false;
//}
});
However playing with this fragment didn't work.
