[react] 특정 html element의 값을 수동으로(programmatically) 셋팅 (el.value = newValue)하는 데 완벽하게 되지 않을 경우에 대한 해결 샘플.

개요

• react로 wrapping한 메신저 라이브러리 (sendbird)의 메시지 입력창 (textarea)에 set value를 해야 하는 상황

• textarea.textContent = newValue 식으로 값을 셋팅한 후 textarea.dispatch(new Event('input'));
  => 처음 한 번은 잘 됨. 이후로는 계속 안됨.

• 검색 끝에 아래의 방법으로 해결함.

유틸함수 선언

const inputTypes = [
  window.HTMLInputElement,
  window.HTMLSelectElement,
  window.HTMLTextAreaElement,
];
/**
 * 특정 html element의 value를 set 하는 input event를 trigger 한다.
 *
 * @param node 적용할 html element
 * @param value
 */
export const triggerInputChange = (node: any, value = "") => {
  // only process the change on elements we know have a value setter in their constructor
  if (inputTypes.indexOf(node.__proto__.constructor) > -1) {
    // @ts-ignore
    const setValue = Object.getOwnPropertyDescriptor(
      node.__proto__,
      "value"
    ).set;
    const event = new Event("input", { bubbles: true });
    // @ts-ignore
    setValue.call(node, value);
    node.dispatchEvent(event);
  }
};

적용

const ta = document.querySelector(".sendbird-message-input--textarea") as HTMLTextAreaElement;      
...
triggerInputChange(ta, ta.textContent + newText); // set value
ta.focus();
ta.selectionStart = ta.value.length; // 커서를 마지막 글자 뒤로 이동

참고

• 원문 링크
• [javascript] textarea 인 척 하는 div (contenteditable=’true’) 의 내용을 스크립트로 set 하는 샘플 (setter, set value programmatically)