fix: prevent focus options shakes sideEffect

theKashey · Jul 9, 2023 · 458b61a · 458b61a
1 parent bee7b55
commit 458b61a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# [3.9.0](https://github.com/theKashey/react-focus-on/compare/v3.8.2...v3.9.0) (2023-07-05)
+
+
+
 ## [3.8.2](https://github.com/theKashey/react-focus-on/compare/v3.8.1...v3.8.2) (2023-06-25)
 
 

diff --git a/src/UI.tsx b/src/UI.tsx
@@ -7,6 +7,8 @@ import ReactFocusLock from 'react-focus-lock/UI';
 import { EffectProps, ReactFocusOnSideProps, LockProps } from './types';
 import { effectCar } from './medium';
 
+const PREVENT_SCROLL = { preventScroll: true };
+
 export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
   (props, parentRef) => {
     const [lockProps, setLockProps] = React.useState<LockProps>(false as any);
@@ -32,14 +34,6 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       ...rest
     } = props;
 
-    // Don't let focusOptions object change reference on each render.
-    // It causes react-clientside-effect to call handleStateChangeOnClient
-    // and change focus to first focusable element inside the trap.
-    const focusOptions = React.useMemo(
-      () => (preventScrollOnFocus ? { preventScroll: true } : undefined),
-      [preventScrollOnFocus]
-    );
-
     const SideCar: SideCarComponent<EffectProps> = sideCar;
 
     const { onActivation, onDeactivation, ...restProps } = lockProps;
@@ -76,7 +70,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
           className={className}
           whiteList={shouldIgnore}
           lockProps={appliedLockProps}
-          focusOptions={focusOptions}
+          focusOptions={preventScrollOnFocus ? PREVENT_SCROLL : undefined}
           as={RemoveScroll}
         >
           {children}