Select2 TokenSeparators not working for S2MultiCheckboxes Extension

I am using the S2MultiCheckboxes with Select2 4.0.3, taken from here: https://github.com/wasikuss/select2-multi-checkboxes

The plugin is working great. However, when adding the "tokenSeparator" option, it is not being implemented in Select2.

Here is the S2MultiCheckboxes code that extends the Select2 plugin:

<script>
    (function($) {
      var S2MultiCheckboxes = function(options, element) {
        var self = this;
        self.options = options;
        self.$element = $(element);
        var values = self.$element.val();
        self.$element.removeAttr('multiple');
        self.select2 = self.$element.select2({
          allowClear: true,
          minimumResultsForSearch: options.minimumResultsForSearch,
          placeholder: options.placeholder,
          tokenSeparators: options.tokenSeparators,
          closeOnSelect: false,
          templateSelection: function() {
            return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length); 
          },
          templateResult: function(result) {
            if (result.loading !== undefined)
              return result.text;
            return $('<div>').text(result.text).addClass(self.options.wrapClass);
          },
          matcher: function(params, data) {
            var original_matcher = $.fn.select2.defaults.defaults.matcher;
            var result = original_matcher(params, data);
            if (result && self.options.searchMatchOptGroups && data.children && result.children && data.children.length != result.children.length) {
              result.children = data.children;
            }
            return result;
          }
        }).data('select2');
        self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
          return function(evt) {
              
            var $this = $(this);
            var data = $this.data('data');
    
            if ($this.attr('aria-selected') === 'true') {
              self.trigger('unselect', {
                originalEvent: evt,
                data: data
              });
              return;
            }
    
            self.trigger('select', {
              originalEvent: evt,
              data: data
            });
          }
        })(self.select2));
        self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
      }
    
      $.fn.extend({
        select2MultiCheckboxes: function() {
          var options = $.extend({
            placeholder: 'Choose elements',
            templateSelection: function(selected, total) {
              return selected.length + ' of ' + total + ' selected';
            },
            wrapClass: 'wrap',
            minimumResultsForSearch: -1,
            searchMatchOptGroups: true
          }, arguments[0]);
    
          this.each(function() {
            new S2MultiCheckboxes(options, this);
          });
        }
      });
    })(jQuery);
</script>

I added the line: tokenSeparators: options.tokenSeparators, at line 13. When I pass the tokenSeparator in as a | character, it still outputs the value as a comma-separated list, not a pipe when I get/output the select2 values.

I have also tried:tokenSeparators: '|' and tokenSeparators: ['|'] I have also tried adding the tags:true option which did not work. I have also tried using separator: '|' which did not work.

Any idea why this isn't working or what needs to be done to get the tokenSeparator changed to a pipe character?

Thanks.

from Select2 TokenSeparators not working for S2MultiCheckboxes Extension