Skip to content

Commit

Permalink
feat: allow the developer to disable focus trap (#138)
Browse files Browse the repository at this point in the history
* initialFocusRef: false to disable focus trap

* Update README
  • Loading branch information
varyoo authored Jun 15, 2021
1 parent 37caf42 commit ef176b3
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 6 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,11 @@ Supports the same value type as the `sibling` prop. Renders the node as a child
### initialFocusRef
Type: `React.Ref`
Type: `React.Ref | false`
A react ref to the element you want to get keyboard focus when opening. If not provided it's automatically selecting the first interactive element it finds.
A react ref to the element you want to get keyboard focus when opening.
If not provided it's automatically selecting the first interactive element it finds.
If set to false keyboard focus when opening is disabled.
### blocking
Expand Down
4 changes: 2 additions & 2 deletions src/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ export const BottomSheet = React.forwardRef<
const focusTrapRef = useFocusTrap({
targetRef: containerRef,
fallbackRef: overlayRef,
initialFocusRef,
enabled: ready && blocking,
initialFocusRef: initialFocusRef || undefined,
enabled: ready && blocking && initialFocusRef !== false,
})

const { minSnap, maxSnap, maxHeight, findSnap } = useSnapPoints({
Expand Down
7 changes: 5 additions & 2 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,11 @@ export type Props = {
*/
header?: React.ReactNode | false

/** A reference to the element that should be focused. By default it'll be the first interactive element. */
initialFocusRef?: React.RefObject<HTMLElement>
/**
* A reference to the element that should be focused. By default it'll be the first interactive element.
* Set to false to disable keyboard focus when opening.
*/
initialFocusRef?: React.RefObject<HTMLElement> | false

/**
* Handler that is called when the user presses *esc*, clicks outside the dialog or drags the sheet to the bottom of the display.
Expand Down

0 comments on commit ef176b3

Please sign in to comment.