From b8b1c13f74709802e4967d6119380ab56c503e7b Mon Sep 17 00:00:00 2001
From: Mika Sanchez <keyneom122@hotmail.com>
Date: Mon, 14 Nov 2022 22:31:00 -0700
Subject: [PATCH] Specify useLayoutEffect dependency array

Executing this effect upon every react re-render can cause the focus to be stolen when a user is interacting with other components. Specifying the appropriate dependency array should ensure that the effect is only executed when necessary.
---
 src/useEditable.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/useEditable.ts b/src/useEditable.ts
index c5ebc79..da10e92 100644
--- a/src/useEditable.ts
+++ b/src/useEditable.ts
@@ -258,7 +258,7 @@ export const useEditable = (
   useLayoutEffect(() => {
     state.onChange = onChange;
 
-    if (!elementRef.current || opts!.disabled) return;
+    if (!elementRef.current || opts?.disabled) return;
 
     state.disconnected = false;
     state.observer.observe(elementRef.current, observerSettings);
@@ -272,7 +272,7 @@ export const useEditable = (
     return () => {
       state.observer.disconnect();
     };
-  });
+  }, [elementRef, onChange, opts.disabled, state, state.disconnected, state.observer, state.position]);
 
   useLayoutEffect(() => {
     if (!elementRef.current || opts!.disabled) {