useAutoBlur

모바일에서 입력 요소에 포커스된 채로 스크롤(touchmove)하면 해당 요소의 포커스를 해제해 소프트 키보드를 닫는 Hook입니다. iOS Safari 등은 입력에 포커스가 남아 있는 한 키보드를 계속 띄워두는데, 이를 순수 CSS로 닫을 수 없어 스크롤 제스처를 감지해 blur하는 방식입니다. touchmove만 감지하므로 데스크톱(비터치) 환경에는 영향이 없습니다.

미리보기

모바일에서 입력창을 탭해 키보드를 띄운 뒤 아래 영역을 스크롤하면 포커스가 해제되어 키보드가 닫힙니다

스크롤 항목 1

스크롤 항목 2

스크롤 항목 3

스크롤 항목 4

스크롤 항목 5

스크롤 항목 6

스크롤 항목 7

스크롤 항목 8

스크롤 항목 9

스크롤 항목 10

스크롤 항목 11

스크롤 항목 12

스크롤 항목 13

스크롤 항목 14

스크롤 항목 15

스크롤 항목 16

스크롤 항목 17

스크롤 항목 18

스크롤 항목 19

스크롤 항목 20

사용법

TSX

1import { useRef } from "react";
2import { Input } from "motile-ui";
3import { useAutoBlur } from "motile-ui/hooks";
4
5export function AutoBlurDemo() {
6  const containerRef = useRef<HTMLDivElement>(null);
7
8  useAutoBlur({
9    containerRef,
10    enabled: true,
11  });
12
13  return (
14    <div ref={containerRef} className="scroll-area">
15      <Input placeholder="입력 후 스크롤해보세요" />
16
17      {/* 스크롤 가능한 긴 영역 */}
18      <div className="content">...</div>
19    </div>
20  );
21}

API 레퍼런스

속성	타입	기본값	설명
`containerRef`	`RefObject<HTMLElement \| null>`	`-`	대상 범위를 좁히는 컨테이너 ref. 지정하면 이 컨테이너 내부에 포커스된 요소만 blur하며, 생략하면 문서 전체의 포커스된 입력 요소를 대상으로 합니다
`enabled`	`boolean`	`true`	Hook 활성화 여부