최신버전 (3.0.4) 이미지 모델 드롭다운 내부 스크롤 시 메뉴가 닫히는 문제

[sterran123]

환경

• ima2-gen 3.0.4
• Google Chrome
• ubuntu 26.04 LTS

문제

이미지 생성 화면 왼쪽 위의 이미지 모델 드롭다운을 열고 목록 내부를 스크롤하면 드롭다운이 즉시 닫힙니다.

모델 목록 아래쪽에 있는 항목을 선택하기 어려운 상태입니다.

재현 방법

1. 이미지 생성 화면으로 이동
2. 왼쪽 위 이미지 모델 드롭다운 열기
3. 드롭다운 목록 내부에서 마우스 휠 또는 스크롤바 사용
4. 목록을 스크롤하는 순간 드롭다운이 닫힘

예상 동작

드롭다운 내부를 스크롤할 때는 목록만 움직이고 메뉴는 열린 상태로 유지되어야 합니다.

외부 화면을 스크롤하거나 드롭다운 밖을 클릭했을 때만 닫혀야 합니다.

원인으로 보이는 부분

포털 방식의 드롭다운에서 다음과 같이 window에 캡처 단계의 스크롤 이벤트가 등록되어 있습니다.

window.addEventListener("scroll", closeDropdown, true);
캡처 모드가 사용되어 드롭다운 목록 자체에서 발생한 스크롤도 해당 핸들러에 전달되고, 메뉴가 닫히는 것으로 보입니다.

적용해본 수정

스크롤 이벤트의 대상이 드롭다운 목록 내부인지 확인하고, 내부 스크롤이면 닫기 처리를 건너뛰도록 수정했습니다.

const handleScroll = (event) => {
const target = event.target;

if (target instanceof Node && listRef.current?.contains(target)) {
    return;
}

closeDropdown();

};

로컬에서 수정 후 확인한 결과:

• 드롭다운 내부 스크롤: 메뉴 유지
• 외부 화면 스크롤: 메뉴 닫힘
• 외부 클릭: 기존처럼 메뉴 닫힘
• 원본과 수정본 index.js를 함께 첨부합니다.

index-CYHfzTEQ.js
index-CYHfzTEQ.original.js
install.sh

[lidge-jun]

dev에 반영했습니다 (#120, 커밋 3b7d3c4).

짚어주신 원인이 정확했습니다. 캡처 단계는 window → document → target 방향으로 내려가기 때문에, 목록 자신이 낸 스크롤도 window에 붙은 닫기 핸들러에 도달합니다. 포털 목록은 overflow-y: auto인 스크롤 컨테이너라 옵션이 많으면 반드시 발생하고요.

첨부해주신 수정과 같은 접근이되, 판정을 ui/src/lib/portalDismiss.ts의 순수 함수로 빼서 경계 조건(내부/자손/외부/document/window/ref 없음)을 테스트로 고정했습니다. 공용 Select 컴포넌트라 포털을 쓰는 6개 지점이 함께 해결됩니다.

수정 전후를 실제 브라우저에서 대조했습니다:

• 수정 전: 내부 스크롤 → aria-expanded="false", 목록 사라짐 (버그 재현)
• 수정 후: 내부 스크롤 → aria-expanded="true", scrollTop=60 (유지)
• 수정 후: 외부 스크롤 → aria-expanded="false" (정상 동작 유지)

원본과 수정본 번들까지 첨부해주셔서 원인 파악이 빨랐습니다. 감사합니다.