[FRE-873] Fix auto focusing input field in shadow-dom (#74)

skip-mev · Jul 18, 2024 · 0eccea4 · 0eccea4
1 parent a86a85f
commit 0eccea4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/spicy-doors-cry.md b/.changeset/spicy-doors-cry.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+Fix auto selecting input fields in shadow-dom
diff --git a/packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx b/packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx
@@ -27,7 +27,11 @@ function AssetSelectContent({
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => inputRef.current?.focus(), []);
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, []);
 
   const [searchValue, setSearchValue] = useState('');
 

diff --git a/packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx b/packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx
@@ -14,7 +14,11 @@ interface Props {
 function ChainSelectContent({ chains, onChange, onClose }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => inputRef.current?.focus(), []);
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, []);
 
   const [searchValue, setSearchValue] = useState('');