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?

I have a solution but you need to use version <= 4.0.2. Is that acceptable ? — bhantol, Feb 06 '18 at 22:04
FYI I got this working with version 4.0.6-rc1 by using the jQuery Mask plugin over the Inputmask plugin: https://igorescobar.github.io/jQuery-Mask-Plugin/ I know your question specified Inputmask, but if you're able to switch then it may be an option for you. — Gary Stanton, Dec 06 '18 at 10:04

score 4 · Accepted Answer · edited May 14 '19 at 07:37

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

How to use Select2 with Inputmask

1 Answers1