How to use Select2 with Inputmask

Question

I am trying to create a Select2 window with InputMask to insert IP addresses and add them as tags.

If I use any of the libraries on my own, it works like a charm, but both lead to strange behavior.

When I print the numbers, the mask does not fill out, but rather expands.

I changed type select2 <input class="select2-search__field">from searchto text. The Inputmask library makes this necessary, but should not cause errors, because the types are functionally identical.

I created a script 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 will be the same.

Did I miss something?

Answer 1

, 4.0.5.

jsfiddle select2 4.0.2

<= 4.0.2

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js

4.0.3 4.0.6-rc.1 .

select2 # 5216 select2.

, .

$('.select2-search__field').attr('type', 'text');
$('.select2-search__field').attr('style', 'width: 10em;');
$('.select2-search__field')
.inputmask({
  alias: 'ip'
});