230812 개발일지 TIL - React PageFlip에서 Input 태그에서 포커스 이슈

React PageFlip 컴포넌트 내부에 input 태그 삽입시 사용자가 글자 하나를 입력하면 포커스가 사라지는 현상

PageFlip의 라이브러리를 활용하여 페이지 넘김 애니메이션을 구현을 하고 있었다.

import HTMLFlipBook from 'react-pageflip';

function MyBook(props) {
    return (
        <HTMLFlipBook width={300} height={500}>
            <div className="demoPage">
            	<input type="text" 
                	value={userConcern}
                    onChange={handleTextareaChange}
                    placeholder="50자 이내로 작성하세요."
                    maxLength={50}
                    onKeyPress={handleKeyPress}
                />
            </div>
            <div className="demoPage">Page 2</div>
            <div className="demoPage">Page 3</div>
            <div className="demoPage">Page 4</div>
        </HTMLFlipBook>
    );
}

문제 발생
HTMLFlipBook 안에 input태그를 삽입시 클릭이 안된다든가 input에 한 글자를 입력하면 포커스를 잃어 버리는 현상이 발생했다.

문제 원인
라이브러리의 버그로 생각이 되었다.
이 라이브러리는 책을 넘기는 애니메이션 효과가 들어간 것으로 이 안에 input태그를 삽입해서 사용할 일은 없어보였다.
그래서 그런지 자료도 없었다.

문제 해결 방법(시도한 방법)
1. z-index로 다른 요소와의 겹칩을 방지하기 위해 시도
2. 포커스 이벤트 핸들링 : input 태그에 포커스와 관련된 이벤트 핸들러를 설정하여 포커스가 잃어지지 않도록 시도
3. React PageFlip 컴포넌트 외부로 input 태그를 배치하여 라이브러리의 영향을 받지 않도록 처리

느낀 점
최신 업데이트가 2년 전이 마지막이었으며 문서도 methods,events,props가 참고할 사이트마다 일정하지도 않고 없는 부분도 있었다.
스택오버플로우도 열심히 찾아 보았지만 역시 자료 부족이었다.
react-pageflip 라이브러리 안에 input태그로 내용을 작성하는 사람이 없어서 그렇지 대체 라이브러리도 마땅치 않았기때문에 결과적으로는 기능구현에 잘 사용했다.

참고 자료

TypeError _this2.flipBook.getPageFlip is not a function

https://stackoverflow.com/questions/68883595/typeerror-this2-flipbook-getpageflip-is-not-a-function