Skip to content

Commit ef176b3

Browse files
author
Antoine D
authored
feat: allow the developer to disable focus trap (#138)
* initialFocusRef: false to disable focus trap * Update README
1 parent 37caf42 commit ef176b3

File tree

3 files changed

+11
-6
lines changed

3 files changed

+11
-6
lines changed

README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,11 @@ Supports the same value type as the `sibling` prop. Renders the node as a child
122122
123123
### initialFocusRef
124124
125-
Type: `React.Ref`
125+
Type: `React.Ref | false`
126126
127-
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.
127+
A react ref to the element you want to get keyboard focus when opening.
128+
If not provided it's automatically selecting the first interactive element it finds.
129+
If set to false keyboard focus when opening is disabled.
128130
129131
### blocking
130132

src/BottomSheet.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ export const BottomSheet = React.forwardRef<
118118
const focusTrapRef = useFocusTrap({
119119
targetRef: containerRef,
120120
fallbackRef: overlayRef,
121-
initialFocusRef,
122-
enabled: ready && blocking,
121+
initialFocusRef: initialFocusRef || undefined,
122+
enabled: ready && blocking && initialFocusRef !== false,
123123
})
124124

125125
const { minSnap, maxSnap, maxHeight, findSnap } = useSnapPoints({

src/types.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,11 @@ export type Props = {
9191
*/
9292
header?: React.ReactNode | false
9393

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

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

0 commit comments

Comments
 (0)