2.8.0.beta5부터 현재 카테고리로 스크롤 기능이 작동하지 않습니다

기여 버그
1

Discourse 2.8.0.beta5 이전 버전에서 주제를 편집하고 카테고리 선택 드롭다운을 클릭하면, 현재 카테고리가 카테고리 목록에서 선택된 상태로 스크롤되어 맨 위에 즉시 표시되며, 해당 하위 카테고리(있는 경우)도 함께 표시됩니다. 이렇게 하면 주제를 더 적합한 하위 카테고리로 쉽게 이동시킬 수 있습니다.

2.8.0.beta4 및 이전 버전에서 정상 작동하는 모습:

2.8.0.beta5부터는 카테고리 선택 드롭다운을 열 때 현재 카테고리로 스크롤이 되지 않습니다:

이러한 짧은 비디오 데모가 제가 설명하려는 내용을 빠르게 보여드리는 데 도움이 되기를 바랍니다.

참고: 제 예시에서는 "고정된 카테고리 위치"와 “생성 시 고정된 카테고리 위치” 옵션이 켜져 있지만, 이 옵션이 켜져 있거나 꺼져 있거나에 관계없이 현재 위치로 스크롤되는 동작이 없습니다.

로컬 개발 환경에서 2.8.0.beta4를 설치하여 원하는 동작을 확인한 후, 2.8.0.beta5로 업데이트하여 해당 동작이 더 이상 작동하지 않는다는 것을 확인했습니다.

코드를 조사하던 중 select-kit.js에 포함된 다음 대규모 커밋에서 변경 사항이 발생한 것을 발견했습니다 (잠시만 기다리면 해당 코드 줄로 이동합니다):

_ scrollToRow() 메서드에서 _scrollToCurrent() 메서드에 의해 호출되는 다음 코드가 제거되었습니다:

if (rowContainer) {
  const collectionContainer = rowContainer.parentNode;

  collectionContainer.scrollTop =
    rowContainer.offsetTop - collectionContainer.offsetTop;
}

2.8.0.beta5의 select-kit.js에 이 코드를 다시 추가하면 문제가 수정된다는 것을 확인했습니다. 다만, 왜 이 코드가 제거되었는지는 명확하지 않아 다시 추가했을 때 발생할 수 있는 다른 부수 효과가 불분명합니다.

이 문제를 확인해 주셔서 감사드리며, 향후 릴리스에서 이 동작이 다시 정상 작동하도록 해결되기를 바랍니다.

4개의 좋아요
3

안녕하세요, 감사합니다 :+1:

제가 왜 이렇게 했는지는 정확히 기억나지 않지만, 현재 AFAICT(제가 아는 한)으로는 이것도 실수인 것 같습니다.

다음과 같은 PR을 만들었습니다:

이 코드를 시도해 보시고, 이 정도면 충분한지 의견을 알려 주실 수 있을까요?

4

Joffrey님, 확인해 주셔서 감사합니다! 최신 변경 사항을 테스트해 보았지만, 작동하지 않는 것 같습니다. 이미 병합이 되었기 때문에 tests-passed 브랜치에서 확인했습니다.

PR의 두 커밋 중 첫 번째 커밋은 작동합니다(ab0fbf1) 하지만, 두 번째 커밋(92943ff)에 의해 덮어씌워집니다.

992행의 변경 사항은 문제가 없어 보이지만, 예상된 효과가 없습니다. collectionContainer.scrollTop 값을 조정하던 삭제된 코드 블록이 필요한 것으로 보입니다.

다시 한번 감사합니다!

1개의 좋아요
5

네, 이 동작만으로는 충분할지 확신이 서지 않았습니다. 내일 이 부분을 다시 추가할 수 있습니다. 현재 이 동작에 대해 정확히 어떤 부분이 마음에 들지 않는지 좀 더 구체적으로 말씀해 주시겠어요?

6

Joffrey님,

이 문제를 계속 확인해 주셔서 감사합니다. 현재 코드 변경 사항(최신 코드를 가져오고, tmp를 지운 후 개발 서버를 재시작했음을 확인했습니다)을 적용해도 2.8.0.beta5 이전 버전에서 존재하던 동작으로 돌아가지 않았습니다. 여전히 드롭다운의 표시된 옵션 상단에 현재 카테고리를 보이도록 스크롤되지 않습니다.

올바른/원하는 동작은 원본 게시글의 첫 번째 영상에 나와 있는 것인데, 현재는 여전히 두 번째 영상과 같은 방식으로 동작하고 있습니다. 현재 스크롤바는 현재 카테고리가 옵션 목록에서 어디에 있든 상관없이 항상 맨 위에 위치해 있습니다.

rowContainer?.focus({ preventScroll }); 줄은 preventScroll이 true든, false든, 혹은 해당 줄 전체를 제거하든 이 경우 어떤 효과도 없는 것 같습니다.

동작을 가능하게 하는 핵심 줄(현재 릴리스에는 없음)은 다음과 같습니다:

collectionContainer.scrollTop =
          rowContainer.offsetTop - collectionContainer.offsetTop;

이 줄이 없으면 scrollTop이 기본적으로 0이므로 올바른 위치로 스크롤되지 않습니다. 이 줄이 실행된 후 scrollTop은 아래로 스크롤해야 하는 정확한 픽셀 수가 됩니다.

도움이 되셨으면 좋겠습니다. 추가로 설명이 필요하시면 말씀해 주세요.

감사합니다!

7

네, 상단에 있는 건 아니지만 뷰포트 안에 보이는데, 그거면 충분하다고 생각했어요.

8

Joffrey님, 안녕하세요.

피드백 주셔서 감사합니다. 데모에 카테고리를 더 추가해 보니, 현재 카테고리가 이제 뷰포트에 표시되는 것을 확인했습니다. 확실히 개선된 점입니다. 다만, 이전처럼 목록 상단에 표시되는 것이 여전히 이상적입니다. 이렇게 하면 그 아래에 있는 하위 카테고리 중 더 많은 부분이 즉시 보이며, 사용자가 먼저 아래로 스크롤하지 않아도 하위 카테고리로 바로 전환할 수 있습니다. 제 생각에는 인접한 무관한 카테고리를 보여주는 것보다 이 사용 사례가 더 중요합니다. 의도적으로 중앙 정렬로 변경된 건지, 아니면 이전 동작에 대한 우발적인 회귀(regression)인 건가요? 어쨌든 판단은 Joffrey님께 맡기며, 그저 제 의견을 드리는 것입니다.

다시 한번 감사드리며, Discourse 개발에 기울여 주시는 노고에 감사드립니다.