: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
container.on('unselect', function () {
if (!container.isOpen()) {
container.on('open', function () {
// When the dropdown is open, aria-expended="true"
self.$results.attr('aria-expanded', 'true');
self.$results.attr('aria-hidden', 'false');
self.ensureHighlightVisible();
container.on('close', function () {
// When the dropdown is closed, aria-expended="false"
self.$results.attr('aria-expanded', 'false');
self.$results.attr('aria-hidden', 'true');
self.$results.removeAttr('aria-activedescendant');
container.on('results:toggle', function () {
var $highlighted = self.getHighlightedResults();
if ($highlighted.length === 0) {
$highlighted.trigger('mouseup');
container.on('results:select', function () {
var $highlighted = self.getHighlightedResults();
if ($highlighted.length === 0) {
var data = $highlighted.data('data');
if ($highlighted.attr('aria-selected') == 'true') {
self.trigger('close', {});
container.on('results:previous', function () {
var $highlighted = self.getHighlightedResults();
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
// If we are already at te top, don't move further
if (currentIndex === 0) {
var nextIndex = currentIndex - 1;
// If none are highlighted, highlight the first
if ($highlighted.length === 0) {
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top;
var nextTop = $next.offset().top;
var nextOffset = self.$results.scrollTop() + (nextTop - currentOffset);
self.$results.scrollTop(0);
} else if (nextTop - currentOffset < 0) {
self.$results.scrollTop(nextOffset);
container.on('results:next', function () {
var $highlighted = self.getHighlightedResults();
var $options = self.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var nextIndex = currentIndex + 1;
// If we are at the last option, stay there
if (nextIndex >= $options.length) {
var $next = $options.eq(nextIndex);
$next.trigger('mouseenter');
var currentOffset = self.$results.offset().top +
self.$results.outerHeight(false);
var nextBottom = $next.offset().top + $next.outerHeight(false);
var nextOffset = self.$results.scrollTop() + nextBottom - currentOffset;
self.$results.scrollTop(0);
} else if (nextBottom > currentOffset) {
self.$results.scrollTop(nextOffset);
container.on('results:focus', function (params) {
params.element.addClass('pumselect2-results__option--highlighted');
container.on('results:message', function (params) {
self.displayMessage(params);
this.$results.on('mousewheel', function (e) {
var top = self.$results.scrollTop();
var bottom = self.$results.get(0).scrollHeight - top + e.deltaY;
var isAtTop = e.deltaY > 0 && top - e.deltaY <= 0;
var isAtBottom = e.deltaY < 0 && bottom <= self.$results.height();
self.$results.scrollTop(0);
self.$results.get(0).scrollHeight - self.$results.height()
this.$results.on('mouseup', '.pumselect2-results__option[aria-selected]',
var data = $this.data('data');
if ($this.attr('aria-selected') === 'true') {
if (self.options.get('multiple')) {
self.trigger('unselect', {
self.trigger('close', {});
this.$results.on('mouseenter', '.pumselect2-results__option[aria-selected]',
var data = $(this).data('data');
self.getHighlightedResults()
.removeClass('pumselect2-results__option--highlighted');
self.trigger('results:focus', {
Results.prototype.getHighlightedResults = function () {
var $highlighted = this.$results
.find('.pumselect2-results__option--highlighted');
Results.prototype.destroy = function () {
Results.prototype.ensureHighlightVisible = function () {
var $highlighted = this.getHighlightedResults();
if ($highlighted.length === 0) {
var $options = this.$results.find('[aria-selected]');
var currentIndex = $options.index($highlighted);
var currentOffset = this.$results.offset().top;
var nextTop = $highlighted.offset().top;
var nextOffset = this.$results.scrollTop() + (nextTop - currentOffset);
var offsetDelta = nextTop - currentOffset;
nextOffset -= $highlighted.outerHeight(false) * 2;
this.$results.scrollTop(0);
} else if (offsetDelta > this.$results.outerHeight() || offsetDelta < 0) {
this.$results.scrollTop(nextOffset);
Results.prototype.template = function (result, container) {
var template = this.options.get('templateResult');
var escapeMarkup = this.options.get('escapeMarkup');
var content = template(result, container);
container.style.display = 'none';
} else if (typeof content === 'string') {
container.innerHTML = escapeMarkup(content);
$(container).append(content);
S2.define('pumselect2/keys',[
S2.define('pumselect2/selection/base',[
], function ($, Utils, KEYS) {
function BaseSelection ($element, options) {
this.$element = $element;
BaseSelection.__super__.constructor.call(this);
Utils.Extend(BaseSelection, Utils.Observable);
BaseSelection.prototype.render = function () {
'<span class="pumselect2-selection" role="combobox" ' +
' aria-haspopup="true" aria-expanded="false">' +
if (this.$element.data('old-tabindex') != null) {
this._tabindex = this.$element.data('old-tabindex');
} else if (this.$element.attr('tabindex') != null) {
this._tabindex = this.$element.attr('tabindex');
$selection.attr('title', this.$element.attr('title'));
$selection.attr('tabindex', this._tabindex);
this.$selection = $selection;
BaseSelection.prototype.bind = function (container, $container) {
var id = container.id + '-container';
var resultsId = container.id + '-results';
this.container = container;
this.$selection.on('focus', function (evt) {
self.trigger('focus', evt);
this.$selection.on('blur', function (evt) {
this.$selection.on('keydown', function (evt) {
self.trigger('keypress', evt);
if (evt.which === KEYS.SPACE) {
container.on('results:focus', function (params) {
self.$selection.attr('aria-activedescendant', params.data._resultId);
container.on('selection:update', function (params) {
self.update(params.data);
container.on('open', function () {
// When the dropdown is open, aria-expanded="true"
self.$selection.attr('aria-expanded', 'true');
self.$selection.attr('aria-owns', resultsId);
self._attachCloseHandler(container);
container.on('close', function () {
// When the dropdown is closed, aria-expanded="false"
self.$selection.attr('aria-expanded', 'false');
self.$selection.removeAttr('aria-activedescendant');
self.$selection.removeAttr('aria-owns');
self._detachCloseHandler(container);
container.on('enable', function () {
self.$selection.attr('tabindex', self._tabindex);
container.on('disable', function () {
self.$selection.attr('tabindex', '-1');
BaseSelection.prototype._handleBlur = function (evt) {
// This needs to be delayed as the active element is the body when the tab
// key is pressed, possibly along with others.
window.setTimeout(function () {
// Don't trigger `blur` if the focus is still in the selection
(document.activeElement == self.$selection[0]) ||
($.contains(self.$selection[0], document.activeElement))
self.trigger('blur', evt);
BaseSelection.prototype._attachCloseHandler = function (container) {
$(document.body).on('mousedown.pumselect2.' + container.id, function (e) {
var $target = $(e.target);
var $select = $target.closest('.pumselect2');
var $all = $('.pumselect2.pumselect2-container--open');
if (this == $select[0]) {
var $element = $this.data('element');
$element.pumselect2('close');
BaseSelection.prototype._detachCloseHandler = function (container) {
$(document.body).off('mousedown.pumselect2.' + container.id);
BaseSelection.prototype.position = function ($selection, $container) {
var $selectionContainer = $container.find('.selection');
$selectionContainer.append($selection);
BaseSelection.prototype.destroy = function () {
this._detachCloseHandler(this.container);
BaseSelection.prototype.update = function (data) {
throw new Error('The `update` method must be defined in child classes.');
S2.define('pumselect2/selection/single',[
], function ($, BaseSelection, Utils, KEYS) {
function SingleSelection () {
SingleSelection.__super__.constructor.apply(this, arguments);
Utils.Extend(SingleSelection, BaseSelection);
SingleSelection.prototype.render = function () {
var $selection = SingleSelection.__super__.render.call(this);
$selection.addClass('pumselect2-selection--single');
'<span class="pumselect2-selection__rendered"></span>' +
'<span class="pumselect2-selection__arrow" role="presentation">' +
'<b role="presentation"></b>' +
SingleSelection.prototype.bind = function (container, $container) {
SingleSelection.__super__.bind.apply(this, arguments);
var id = container.id + '-container';
this.$selection.find('.pumselect2-selection__rendered').attr('id', id);
this.$selection.attr('aria-labelledby', id);
this.$selection.on('mousedown', function (evt) {
// Only respond to left clicks
this.$selection.on('focus', function (evt) {
// User focuses on the container
this.$selection.on('blur', function (evt) {
// User exits the container
container.on('selection:update', function (params) {
self.update(params.data);
SingleSelection.prototype.clear = function () {
this.$selection.find('.pumselect2-selection__rendered').empty();
SingleSelection.prototype.display = function (data, container) {
var template = this.options.get('templateSelection');
var escapeMarkup = this.options.get('escapeMarkup');