[React] 사파리에서 키보드 입력으로 모달이 닫히면 스크롤이 튀는 현상

로그인 모달을 구현하던 중, 엔터 키로 로그인했을 때만 페이지가 갑자기 맨 아래로 스크롤되는 문제가 있었다.

버튼 클릭으로 로그인하면 문제없이 잘 작동하고, 엔터 키 입력으로만, 그리고 또 사파리에서만(🤦‍♂️) 이 현상이 발생했다.

---

🤔 증상

• 로그인 모달에서 입력 후 엔터 키로 로그인
• 로그인 성공 → 모달이 닫힘
• 이후 페이지가 자동으로 최하단까지 스크롤됨

---

🔍 사파리의 포커스 처리 방식

문제는 포커스가 사라지는 타이밍과 사파리의 처리 방식의 충돌로 추정된다.

발생 흐름

1. 사용자가 input에 포커스된 상태에서 엔터 키 입력
2. 로그인 로직 실행 후 모달이 DOM에서 제거됨
3. input도 함께 사라지며 브라우저 포커스가 날아감
4. 사파리는 새 포커스 대상을 찾지 못하고 스크롤을 맨 아래로 이동시킴

다른 브라우저에서는 비슷한 상황에서도 스크롤 이동 없이 자연스럽게 처리하지만 사파리는 이 순간 스크롤을 강제로 이동시키는 동작을 보인다.

버튼 클릭은 왜 괜찮았을까?

• 버튼을 클릭하면 포커스가 input → 버튼으로 이동
• 반면 엔터 입력 시에는 여전히 input에 포커스된 상태
• input이 갑자기 사라지면서 사파리가 포커스 처리에 실패하고 스크롤이 튀는 것으로 추정

---

🛠 blur()로 포커스 제거

문제의 원인을 알고 나니, 해결은 간단했다. 엔터 키를 입력하는 순간, input에서 포커스를 미리 제거하면 된다.

const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    // 👇 포커스 강제 제거
    (e.target as HTMLElement).blur();

    if (!isLoading) {
      handleLogin();
    }
  }
};

---

✅ 결과

---

🧑‍🏫 회고

• 모달처럼 DOM 제거가 포함된 상호작용은 브라우저 간 차이가 생길 수 있다.
• 사파리는 보안 정책에 이어 브라우저 기본 동작에서도 종종 예외적인 행동을 보인다😭