4
0
forked from crowetic/commerce
commerce/site/lib/focus-trap.tsx
Catalin Pinte 11609a9e71
Upgrade dependencies & pnpm (#785)
* Updated log

* Updates to root

* Updates to pnpm

* successfully moved to pnpm

* type issue

* Local as the default provider

* Upgrade dependencies

* Revert to local

* Upgrade React

* Update node-fetch deps

* Fix types

* Ignore warnings

* Fix missing dependency

* Update pnpm-lock.yaml

* Add missing @types/cookie

* Upgrade dependencies

* Fix missing dependencies

* Update README.md

Co-authored-by: Bel Curcio <curciobel@gmail.com>
2022-09-19 08:14:49 +03:00

69 lines
1.6 KiB
TypeScript

import React, { useEffect, RefObject } from 'react'
import { tabbable } from 'tabbable'
interface Props {
children: React.ReactNode | any
focusFirst?: boolean
}
export default function FocusTrap({ children, focusFirst = false }: Props) {
const root: RefObject<any> = React.useRef()
const anchor: RefObject<any> = React.useRef(document.activeElement)
const returnFocus = () => {
// Returns focus to the last focused element prior to trap.
if (anchor) {
anchor.current.focus()
}
}
const trapFocus = () => {
// Focus the container element
if (root.current) {
root.current.focus()
if (focusFirst) {
selectFirstFocusableEl()
}
}
}
const selectFirstFocusableEl = () => {
// Try to find focusable elements, if match then focus
// Up to 6 seconds of load time threshold
let match = false
let end = 60 // Try to find match at least n times
let i = 0
const timer = setInterval(() => {
if (!match !== i > end) {
match = !!tabbable(root.current).length
if (match) {
// Attempt to focus the first el
tabbable(root.current)[0].focus()
}
i = i + 1
} else {
// Clear interval after n attempts
clearInterval(timer)
}
}, 100)
}
useEffect(() => {
setTimeout(trapFocus, 20)
return () => {
returnFocus()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [root, children])
return React.createElement(
'div',
{
ref: root,
className: 'outline-none focus-trap',
tabIndex: -1,
},
children
)
}