How to use Select2 with Inputmask - jquery-select2

Question

I am trying to create a Select2 box with InputMask to insert IP addresses and add them as tags.
If I use any of the libraries on its own, it works like a charm but both together results in strange behavior.
When I type in numbers, the mask is not filled but rather it seems to expand.
I changed the type of the select2 <input class=“select2-search__field“> from search to text. The Inputmask library makes this necessary, but it should not cause errors because the types are functionally identical.
I created a Fiddle to show the behavior: Fiddle
HTML:
<select multiple id="sel1" style="width:100%"></select>
JS:
$("#sel1")
.select2({
tags: true
})
.on("select2:open", function () {
$(".select2-search__field")
.attr("type","text")
.inputmask({alias: "ip", greedy: false});
})
In my local example I changed the library to support search and the behavior is the same.
Am I missing something?

Answer 1

There is a bad news for you if you MUST use version 4.0.5.
Fixed in jsfiddle by downgrading select2 to version 4.0.2
The main thing is version <= 4.0.2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js
Tried 4.0.3 onwards up to 4.0.6-rc.1 but no luck.
Opened up issue select2#5216 with select2.
I did a slight change but that has nothing to do with the problem itself.
$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
alias: 'ip'
});