diff --git a/.changeset/spicy-doors-cry.md b/.changeset/spicy-doors-cry.md new file mode 100644 index 000000000..ef4544bfe --- /dev/null +++ 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 index a6df9fea9..94e05c091 100644 --- 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(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 index 41094723e..af2d35bcd 100644 --- 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(null); - useEffect(() => inputRef.current?.focus(), []); + useEffect(() => { + setTimeout(() => { + inputRef.current?.focus(); + }, 0); + }, []); const [searchValue, setSearchValue] = useState('');