Как добавить пользовательский js для select в блоке выбора Wagtail

Моя цель состоит в том, чтобы выбор (выпадающие поля) обрабатывался custom-select js библиотекой для блоков в Wagtail Stream Field. Так как это довольно легко добавить для обычных полей при срабатывании события DOMContentLoaded. Но есть ли какой-нибудь event или hook для добавления блока в StreamField?

Я пробовал даже вызывать свою функцию в html-шаблоне для блока. Но, похоже, она вызывается слишком рано, потому что стили не применяются к селектам в этом html.

Это моя .js (машинопись)

const initColorChoosers = () => {
const colorChoosers = Array.from(document.querySelectorAll('.color-chooser select')) as HTMLSelectElement[];
colorChoosers.forEach((chooser) => {
    if (!chooser.hasAttribute('custom')) {
        chooser.setAttribute("custom", "true")
        new CustomSelect(chooser, {
            customOptionClass: 'option--hero-glow-color'
        })
    }
})
}
document.addEventListener("DOMContentLoaded", function (event) {
    window.myfuncs.initColorChoosers = () => initColorChoosers();
});

и мой выбор цвета:

class Colors(blocks.ChoiceBlock):
choices = [
    ('color1', 'color1'),
    ('color2', 'color2'),
    ('color2', 'color2'),
]
required = False,

class Meta:
    form_classname = 'color-chooser'
    icon = 'copy'

и шаблон блока в конце содержит:

<script>
    window.myfuncs.initColorChoosers()
</script>

И это работает... но для уже добавленных блоков, а не для текущего. Так, если я добавлю блок, содержащий ColorChooser, он не будет применять логику из custom-select, но когда я добавлю другой блок, для первого будут применены изменения.

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