Select2 IPs as tags with select2

Strange behavior

by yogeshgadge

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js"></script>
<select multiple id="sel1" style="width:100%"></select>

<p>
  <input id="input1" style="width:100%" autocorrect="off" autocomplete="off" aria-autocomplete="list" placeholder />
</p>

JavaScript

var first = true;
 $("#sel1")
   .select2({
     tags: true
   })
   .on("select2:open", function() {
     if (first) {
       first = true;
       $(".select2-search__field").attr('type', 'text');
       $(".select2-search__field").attr('style', 'width: 10em;');
       $(".select2-search__field")
         .inputmask({
           alias: "ip"
         });
     }

   });

 $("#input1").inputmask({
   alias: "ip"
 });