Почему значение input[type="radio"] меняется, но событие change не вызывается?

Question

[tempick]

Есть верстка с минифицированным js. На странице есть выпадающий список:


Вот так устроен один из элементов:

<div class="custom-select__option student-score-label" data-status="red">
  <input type="radio" value="Не выполнено" name="student-score">
  <div class="custom-select__label">Не выполнено</div>
</div>

При выборе элемента из выпадающего списка (.custom-select__label) - меняется значение input. Но я не могу отловить это событие т.к. не срабатывает onchange. Почему?
Пришлось слушать событие клика по .custom-select__label и использовать setTimeout() для перестраховки - вдруг я прочитаю значение радиокнопок до того как оно изменится. Но хотелось бы решить по-человечески.

Comments

[Aetae]

Ну видать значение там ставят программно. При программной установке никаких событий нет(если их не вызвали вручную).

Вот так можно кастомный слушатель сделать попатчив сам input:

const {set, ...rest} = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'checked');
Object.defineProperty(HTMLInputElement.prototype, 'checked', {
  set(value) {
    value = !!value;
    
    if(!this.dispatchEvent(new CustomEvent('before-checked', {
      cancellable: true,
      detail: value
    }))) return false;
    
    const res = set.call(this, value);
    
    this.dispatchEvent(new CustomEvent('after-checked', {
      detail: value
    }));
    
    return res;
  }, 
  ...rest
})

input.addEventListener('after-checked', (event) => {
  console.log('after-checked', event.target.checked, event.detail)
});

Само собой не обязательно патчить глобально все инпуты, можно только нужные:

Object.defineProperty(HTMLInputElement.prototype, 'checked', { ...
->
Object.defineProperty(input, 'checked', { ...