DEV Community

Mohit Kumar Yadav
Mohit Kumar Yadav

Posted on • Updated on

Trap focus in react

Use following keyDownHandler on div you want to trap focus

  const keyDownHandler = (e) => {
    // only execute if tab is pressed
    if (e.key !== 'Tab') return

    // here we query all focusable elements, customize as your own need
    const focusableModalElements = modalRef.current.querySelectorAll(
      'a[href], button:not([disabled]), textarea, input, select'

    const firstElement = focusableModalElements[0]
    const lastElement =
      focusableModalElements[focusableModalElements.length - 1]

    // if going forward by pressing tab and lastElement is active shift focus to first focusable element 
    if (!e.shiftKey && document.activeElement === lastElement) {
      return e.preventDefault()

    // if going backward by pressing tab and firstElement is active shift focus to last focusable element 
    if (e.shiftKey && document.activeElement === firstElement) {

Enter fullscreen mode Exit fullscreen mode

Top comments (0)