useFocusLock

The useFocusLock hook traps focus within the given element such that when a user Tab or Shift+Tabs, focus is only cycled through nodes contained within that element.

This is of particular relevance when constructing modals. Consider the situation where you tab past the last element in a modal. Without trapping the focus within the dialog, focus moves into a part of the page that you can't click without closing the modal.

Usage

import { useFocusLock } from "@artsy/palette"

const Example = (props) => {
  const containerEl = useRef<HTMLDivElement | null>(null)

  useFocusLock({ ref: containerEl })

  return (
    <>
      <input placeholder="Cannot tab into" />

      <Box ref={containerEl}>
        <input placeholder="First tabstop" />
        <input placeholder="Second tabstop" />
        <button>Third tabstop</button>
      </Box>
    </>
  )
}
On this page
Usage