clipboard.js 와 bootstrap Modal, magnific-pop up 함께 사용한 후기.
clipboard.js 와 bootstrap Modal을 사용하면 정상 작동 하지 않는 이슈가 있다.
문제 원인.
modal에서 모달창의 focus 상태를 유지하기 위해 강제 포커스를 시키는 함수로 인해 클립보드에 복사하려는 지점의 위치를 잃게되는 이슈이다.
문제 해결방안.
해당 bootstrap에서의 focus 를 강제화 하는 함수를 function(){} 을 설정함으로 해결 된다.
Bootstrap 3
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
Bootstrap 4
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
자세한 사항은 clipboard.js에 나온 이슈를 확인하자.
알려진 이슈에 나와있음.
clipboard.js 와 magnific-pop up을 사용하면 정상 작동 하지 않는 이슈가 있다.
다양한 기능을 가진 이미지 겔러리인 magnific-pop up 라이브 러리를 사용할 경우에도 bootstrap Modal을 활용한 때와 동일한 문제가 발생한다.
문제 원인.
bootstrap Modal 사용때와 동일.
문제 해결 방안.
bootstrap Modal 사용때와 비슷하지만 빈 함수를 설정하는 대상이 다르다.
$.magnificPopup.proto._setFocus = function(){};
본문
최신 브라우저에서 역시 문제없이 구동되는 것으로 일단 만족하고, 실제 서비스에 적용해보았더니. 모달창에서의 구동은 정상작동 했지만 실제 클립보드에 url 주소가 복사되지 않는 버그를 발견 하였다.
장시간의 검색을 통해 찾게 된 이슈(https://github.com/zenorocha/clipboard.js/issues/187) 를 통해서 해결 방법을 찾게 되었고, 실제 bootstrap이 아닌 bootstrap Modal 기능을 사용하고 있는 magnific-pop up 라이브러리를 사용하고 있었기 때문에 필자는 bootstrap쪽이 아닌 magnific-pop up쪽에서 해결책을 찾게 되었다.
역시나 나말고 다른 사람도 겪었던 문제였다.
댓글
댓글 쓰기