Merge pull request #63 from constancecchen/master

feat: Add explicit `focusOptions` support for `ReactFocusLock`
theKashey · Nov 13, 2022 · 7a2900f · 7a2900f
2 parents a2f4fd8 + 6587e9d
commit 7a2900f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/UI.tsx b/src/UI.tsx
@@ -24,6 +24,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       sideCar,
       className,
       shouldIgnore,
+      preventScrollOnFocus,
       style,
       as,
       ...rest
@@ -58,6 +59,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
           className={className}
           whiteList={shouldIgnore}
           lockProps={appliedLockProps}
+          focusOptions={preventScrollOnFocus ? { preventScroll: true } : undefined}
           as={RemoveScroll}
         >
           {children}

diff --git a/src/types.ts b/src/types.ts
@@ -80,7 +80,11 @@ export interface ReactFocusOnProps extends CommonProps {
    * @default true
    */
   returnFocus?: ComponentProps<typeof ReactFocusLock>['returnFocus'] | undefined;
-
+  /**
+   * [focus-lock] prevents scroll on focus via focusOptions
+   * @default false
+   */
+  preventScrollOnFocus?: boolean | undefined;
   /**
    * [focus-lock] allows "ignoring" focus on some elements
    * @see {@link https://github.com/theKashey/react-focus-lock#api}