왜 문제냐면 이 문제는 IE에서만 발생하기 때문이다.

IE에서 안되는 케이스

button

<input type="text" class="testInput" value="0">
<button type="button" class="testBtn">button</button>

const testInput = document.querySelector('.testInput');
const testBtn = document.querySelector('.testBtn');

testInput.addEventListener('change', function() {
  testBtn.innerText = 'button ' + this.value;
});

testBtn.addEventListener('click', () => {
  testInput.value++;

  const event = document.createEvent('HTMLEvents');
  event.initEvent('change', true, false);
  testInput.dispatchEvent(event);
});

코드대로라면 버튼을 누르면 인풋에 숫자가 올라가고 인풋에 숫자가 올라가면 버튼에도 숫자가 올라가야한다.

이 경우가 IE에서만 안되는데 이게 이렇게 간단한 예제로, 결과를 놓고 봐서 쉽게 받아들일 수 있지 꽤 복잡한 구성에서 IE에서만 정상적인 값 계산이 안되서, 걸려있는 이벤트를 다 체크하고 의심하며 이유가 뭔지 찾는데 한참 시간을 들였다.

IE에서 되는 케이스

button

확인해본 결과 원인은 input 상태가 disabled이기 때문이라 다른 방법을 취해야한다.
방법에는 여러가지가 있을 것 같다. disabled 제거하고 대신에 클릭이나 포커스를 막아서 사용할 수 없게 하던지…
이 업무에선 굳이 비활성 안해도 되는 부분이라 비활성 자체를 해제해버렸는데 만약 비활성을 유지해야한다면 disabled를 풀고 트리거 후에 disabled를 다시 추가하는 형태로 바꿔도 딱히 문제는 없어보인다.

testBtn.addEventListener('click', () => {
  testInput.value++;

  const event = document.createEvent('HTMLEvents');
  event.initEvent('change', true, false);

  testInput.disabled = false;
  testInput.dispatchEvent(event);
  testInput.disabled = true;
});