How to use Select2 with Inputmask

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'
});