fix: editors with drop-down layer to follow scrolling #1542
Conversation
| return start <= value && value <= end; | ||
| } | ||
|
|
||
| export function pixelToNumber(pixelString: string) { |
There was a problem hiding this comment.
string대신 템플릿 리터럴 타입쓰면 될 것 같은데..생각해보니 ts 버전이 낮아 안되겠네요..
| if (this.editor?.moveDropdownLayer) { | ||
| this.editor.moveDropdownLayer({ | ||
| bodyHeight, | ||
| bodyWidth, | ||
| bodyScrollTop, | ||
| bodyScrollLeft, | ||
| headerHeight, | ||
| leftSideWidth, | ||
| ...this.initBodyScroll, | ||
| }); | ||
| } |
There was a problem hiding this comment.
엔터키로 편집 종료하거나 탭키로 에디팅 레이어 이동할 때는 문제 없나요?
There was a problem hiding this comment.
키보드 동작이 정상적으로 동작하지 않아 원인을 알아보니, visibility: hidden;이나 display: none;처럼 DOM 상에 보여지지 않는 요소에는 포커스를 줄 수 없다는 것을 알았습니다.
실제로 에디팅 중에 스크롤을 이용해 에디터를 보이지 않게 설정하면 editingLayer`가 포커스를 잃는 것을 확인했습니다.
이를 해결하기 위해서는 에디터를 DOM 상에서 보이지만, 실제로는 보이지 않게 해야했습니다. 이를 위해 드롭다운 레이어의top과 left를 0으로 설정해 그리드 바디 좌측 상단에 위치하도록 하고 z-index를 -100을 할당해 그리드 셀 아래로 숨겨지도록 했습니다.
결과적으로 보여지는 화면은 같지만, 키보드 동작은 정상적으로 수행할 수 있었습니다. 이런 방법을 이용해도 괜찮을까요?
There was a problem hiding this comment.
@jajugoguma
stack context나 위치 자체를 바꾸기 보다 opacity로 제어하는게 제일 나을 것 같은데 어떤가요?
There was a problem hiding this comment.
처음에는 opacity를 이용해 제어했었습니다.
그러나 드롭다운 레이어가 보이지만 않을 뿐 실제로를 그 위치 그대로 있어서 위 그림과 같이 드롭다운 내 요소가 선택되어 값이 변하는 것을 볼 수 있었습니다. 그래서 stack context를 이용해 드롭다운 레이어가 선택되지 않도록 하고, 보이지 않는다면 레이어의 위치를 계속 이동시킬 필요가 없다고 생각해서 top: 0px; left: 0px;에 고정시키는 방법을 사용해보았습니다.
Please check if the PR fulfills these requirements
fix #xxx[,#xxx], where "xxx" is the issue number)Description
As-Is
To-Be
Thank you for your contribution to TOAST UI product. 🎉 😘 ✨