포커스 트랩 (Focus Trap) 🙊

#구현 해보자.

const FocusTrapModal = ({ isOpen, onClose }) => {
  const focusTrapArea = useRef(null);
  const focusPossibleEles = useRef([]);
  const currFocusIdx = useRef(0);

  const handleTab = () => {
    const currHtml = focusPossibleEles.current[currFocusIdx.current + 1];
    if (currHtml !== undefined) {
      currHtml.focus();
      currFocusIdx.current++;
      return;
    }
    focusPossibleEles.current[0].focus();
    currFocusIdx.current = 0;
  };

  const wrapHandleTab = (e) => {
    if (!e.shiftKey && e.key === "Tab") {
      e.preventDefault();
      handleTab();
    }
  };

  const handleShiftTab = () => {
    const currenthtml = focusPossibleEles.current[currFocusIdx.current - 1];
    if (currenthtml !== undefined) {
      currenthtml.focus();
      currFocusIdx.current--;
      return;
    }
    focusPossibleEles.current.at(-1).focus();
    currFocusIdx.current = focusPossibleEles.current.length - 1;
  };

  const wrapHandleShiftTab = (e) => {
    if (e.shiftKey && e.key === "Tab") {
      e.preventDefault();
      handleShiftTab();
    }
  };

  const preventKeyDown = (e) => {
    // 한글 제어
    if (e.isComposing || e.key === "Backspace") {
      return;
    }

    wrapHandleTab(e);
    wrapHandleShiftTab(e);
  };

  const handleBeforeUnload = (event) => {
    const message = "변경사항이 저장되지 않았습니다. 정말 떠나시겠습니까?";
    event.returnValue = message;
    return message;
  };

  useEffect(
    function functionAnjunghwan() {
      if (isOpen) {
        focusPossibleEles.current = Array.from(
          focusTrapArea.current.children
        ).filter((val) => val.tabIndex >= 0 && val.disabled !== true);

        focusPossibleEles.current[0].focus();
        focusTrapArea.current.addEventListener("keydown", preventKeyDown);

        window.addEventListener("beforeunload", handleBeforeUnload);
      }
      return () => {
        if (focusTrapArea.current) {
          focusTrapArea.current.removeEventListener("keydown", preventKeyDown);
        }
        window.removeEventListener("beforeunload", handleBeforeUnload);
      };
    },
    [isOpen]
  );

  const handleOnClick = (e) => {
    e.preventDefault();
    currFocusIdx.current = e.target.tabIndex;
    focusPossibleEles.current[e.target.tabIndex].focus();
  };

  return (
    <div className="modal-overlay">
      <div className="modal" ref={focusTrapArea}>
        <button className="close-btn" onClick={onClose} tabIndex={-1}>
          X
        </button>
        <h2>모달 창</h2>

        <input
          type="text"
          placeholder="여기에 입력"
          onClick={handleOnClick}
          tabIndex={0}
        />
        <textarea
          placeholder="여기에 텍스트 입력"
          onClick={handleOnClick}
          tabIndex={1}
        />
        <input
          type="text"
          placeholder="여기에 입력"
          onClick={handleOnClick}
          tabIndex={2}
        />
        <input
          type="text"
          placeholder="여기에 입력"
          onClick={handleOnClick}
          tabIndex={3}
        />

        <button onClick={onClose} tabIndex={-1}>
          저장
        </button>
        <button onClick={onClose} tabIndex={-1}>
          취소
        </button>
        <button disabled onClick={onClose} tabIndex={-1}>
          임시저장
        </button>
      </div>
    </div>
  );
};
export default FocusTrapModal;

그런데 keyin 요소에 영어를 keyin하고 Tab하면 잘되는데

한글을 keyin하고 Tab하면 마지막 글자가 복사되어 Tab이후에 다음 keyin요소에 복제되는 상황이 생겼다.

이러한 문제가 발생했을때는

if(e.isComposing){
   return;
}

으로 막아주면 된다.

구글링 해보면

한글은 영어와 달리 자음,모음으로 이루어져 있기 때문이라고 한다.

자음,모음을 입력할 때 IME(Input Method Editor)가 입력중(문자 조합 중)임을 나타내는 `isComposing`상태가 된다고 한다.

포커스 트랩 (Focus Trap) 🙊

TOC

#구현 해보자.