useOpenAndCloseFocus

A utility hook that focuses an element when a component is first mounted and returns focus to another element when the component unmounts.

Examples

Default

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'


interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  children: React.ReactNode
}


const DemoOverlay = ({returnFocusRef, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}


export default function Default() {
  const returnFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)


  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef}>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'

interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  children: React.ReactNode
}

const DemoOverlay = ({returnFocusRef, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}

export default function Default() {
  const returnFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef}>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

Custom first focused element

If no ref is passed to initialFocusRef, the hook focuses the first focusable element inside of the container.

If preventFocusOnOpen prop is passed, then no focus will be applied when component mounts, even if initialFocusRef prop is included. Only initial focus is prevented; focus will still be returned to returnFocusRef when component unmounts.

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'


interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  initialFocusRef: React.RefObject<HTMLElement>
  children: React.ReactNode
}


const DemoOverlay = ({returnFocusRef, initialFocusRef, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef, initialFocusRef})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}


export default function InitialFocusRef() {
  const returnFocusRef = React.useRef(null)
  const initialFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)


  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef} initialFocusRef={initialFocusRef}>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            ref={initialFocusRef}
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'

interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  initialFocusRef: React.RefObject<HTMLElement>
  children: React.ReactNode
}

const DemoOverlay = ({returnFocusRef, initialFocusRef, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef, initialFocusRef})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}

export default function InitialFocusRef() {
  const returnFocusRef = React.useRef(null)
  const initialFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef} initialFocusRef={initialFocusRef}>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            ref={initialFocusRef}
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

Prevent focus in the container when it is opened

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'


interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  preventFocusOnOpen: boolean
  children: React.ReactNode
}


const DemoOverlay = ({returnFocusRef, preventFocusOnOpen, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef, preventFocusOnOpen})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}


export default function Default() {
  const returnFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)


  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef} preventFocusOnOpen>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

import React from 'react'
import {useOpenAndCloseFocus} from '@primer/react'

interface DemoOverlayProps {
  returnFocusRef: React.RefObject<HTMLElement>
  preventFocusOnOpen: boolean
  children: React.ReactNode
}

const DemoOverlay = ({returnFocusRef, preventFocusOnOpen, children}: DemoOverlayProps) => {
  const containerRef = React.useRef(null)
  useOpenAndCloseFocus({containerRef, returnFocusRef, preventFocusOnOpen})
  return (
    <div
      ref={containerRef}
      style={{
        border: '1px solid',
        margin: '1rem',
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
      }}
    >
      {children}
    </div>
  )
}

export default function Default() {
  const returnFocusRef = React.useRef(null)
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div>
      <button ref={returnFocusRef} onClick={() => setIsOpen(!isOpen)}>
        Toggle the overlay
      </button>
      {isOpen && (
        <DemoOverlay returnFocusRef={returnFocusRef} preventFocusOnOpen>
          <p>Welcome to my overlay.</p>
          <button>Do nothing</button>
          <button
            onClick={() => {
              setIsOpen(false)
            }}
          >
            Close the overlay
          </button>
        </DemoOverlay>
      )}
    </div>
  )
}

API

Loading data for useOpenAndCloseFocus...

useOverlay