Как перехватить все события `select2:open` в админке Django 4?

Я просто не могу поймать select2:open события, которые должны быть вызваны выпадающими списками Select2, используемыми в полях Django ForeignKey с включенной функцией автозаполнения.

Вот код, который я сейчас выполняю, чтобы поймать эти события (я пытаюсь автоматически установить фокус на дочернюю панель поиска, когда открыт Select2):

-- autofocus_select2_searchbars.js

/**
 * Add an event listener to all the select2 widgets on the page so that
 * when they are opened, the search input is automatically focused.
 */
function setFocusOnSearchBarsWhenSelect2WidgetsAreOpen() {
  console.log('setFocusOnSearchBarsWhenSelect2WidgetsAreOpen');
  $(document).on('select2:open', () => {
    console.log('select2:open');
    document.querySelector('.select2-container--open .select2-search__field').focus();
  });
}

$(document).ready(function () {
  setFocusOnSearchBarsWhenSelect2WidgetsAreOpen();
});

и я вызываю это в change_form.html, чтобы оно применялось к каждому представлению изменений в админке:

-- myproject/templates/admin/change_form.html

{% extends "admin/change_form.html" %}
{% load i18n admin_urls static %}
{% block admin_change_form_document_ready %}
    {{ block.super }}
    <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
    <script>
        {% include "./shared/autofocus_select2_searchbars.js" %}
    </script>
{% endblock admin_change_form_document_ready %}

Проблема в том, что событие select2:open никогда не срабатывает.

Проблема заключалась во включении jQuery самостоятельно с импортом CDN в change_form.html:

<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>

Виджеты Select2, используемые Django, инициализируются с помощью встроенной версии jQuery в Django, а события jQuery, запускаемые этими инициализированными виджетами Select2, обрабатываются тем же экземпляром jQuery.

Итак, решение состоит в том, чтобы просто удалить импорт jQuery из CDN и использовать вместо него экземпляр из комплекта django. После удаления импорта CDN, я просто добавил следующее объявление в верхней части autofocus_select2_searchbars.js:

const $ = django.jQuery;

переменная django доступна, потому что мы расширяем admin/change_form.html.

Вернуться на верх