[Quill] Quill.prototype.focus(): 스크롤 최상단 초기화

문제

     <div
        onClick={(e) => {          
          quill.focus();
          setIsEditing(() => true);
        }}
      />

원인

click 이벤트 때 quill에 포커스를 주려고 quill.foucs()를 사용했다.
클릭 때마다 스크롤이 최상단으로 올라가서 확인해보니 quill.focus() 사용 시 스크롤이 초기화 되는 걸 발견했다.

해결

     <div
        onClick={(e) => {  
          if (isEditing) return;
          quill.focus();
        }}
      />

editing 상태일 때 quill focus가 일어나지 않도록 변경해서 해결...

참고

  focus() {
    const { scrollTop } = this.scrollingContainer;
    this.selection.focus();
    this.scrollingContainer.scrollTop = scrollTop;
    this.scrollIntoView();
  }

  scrollIntoView() {
    this.selection.scrollIntoView(this.scrollingContainer);
  }

• scrollingContainer => bounds *
  quill respository를 보니 bounds된 DOM 으로 scrollIntoView 해준다...
  그래서 스크롤이 상단으로 이동 하는 현상이... 아 3시간 걸림

scrollIntoView

The scrollIntoView() method can cause the page to scroll to the top if the element being scrolled into view is positioned at the top of the page and there is not enough space above it to show the entire element.

When the scrollIntoView() method is called, the browser will attempt to scroll the element into view by scrolling the page so that the top of the element is aligned with the top of the viewport. If the element is positioned at the top of the page and there is not enough space above it to show the entire element, the page will scroll to the top to show as much of the element as possible.