{% load static %}
{# Requires head partial. Pass: select_id; optional placeholder (plain text, no double quotes). #}
<script src="{% static 'js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'js/vendor/select2.min.js' %}"></script>
<script>
(function () {
  var el = document.getElementById('{{ select_id }}');
  if (!el || !window.jQuery) return;
  var $el = window.jQuery(el);

  function stripInlineSearchWidth() {
    window.requestAnimationFrame(function () {
      var $c = $el.next('.select2-container');
      $c.find('.select2-search--inline .select2-search__field').each(function () {
        this.style.removeProperty('width');
      });
    });
  }

  $el.select2({
    placeholder: "{% filter escapejs %}{% if placeholder %}{{ placeholder }}{% else %}Search permissions{% endif %}{% endfilter %}",
    allowClear: true,
    width: '100%',
    closeOnSelect: false,
    minimumResultsForSearch: 0,
    dropdownParent: window.jQuery(document.body),
  });

  $el.on('select2:select select2:unselect select2:clear', stripInlineSearchWidth);
  stripInlineSearchWidth();
  setTimeout(stripInlineSearchWidth, 0);
  setTimeout(stripInlineSearchWidth, 50);
})();
</script>