From 0eccea48967b69de7e690bae0b67d35655707a5b Mon Sep 17 00:00:00 2001 From: Todd Kao Date: Thu, 18 Jul 2024 17:20:31 -0400 Subject: [PATCH] [FRE-873] Fix auto focusing input field in shadow-dom (#74) --- .changeset/spicy-doors-cry.md | 5 +++++ packages/widget/src/ui/AssetSelect/AssetSelectContent.tsx | 6 +++++- packages/widget/src/ui/ChainSelect/ChainSelectContent.tsx | 6 +++++- 3 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 .changeset/spicy-doors-cry.md 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('');