From 07401ac08f34520882703cbe78f8aa1969e24cc5 Mon Sep 17 00:00:00 2001 From: Jules Guesnon <36401048+JulesGuesnon@users.noreply.github.com> Date: Thu, 9 Feb 2023 06:37:25 +0900 Subject: [PATCH] [Fix] Dropdown focus when app is launching (#563) fix(Interface): Removed the focus when app is launching --- packages/interface/src/components/layout/Sidebar.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx index 6054608d6..077253083 100644 --- a/packages/interface/src/components/layout/Sidebar.tsx +++ b/packages/interface/src/components/layout/Sidebar.tsx @@ -1,7 +1,7 @@ import { ReactComponent as Ellipsis } from '@sd/assets/svgs/ellipsis.svg'; import clsx from 'clsx'; import { CheckCircle, CirclesFour, Gear, Lock, Planet, Plus } from 'phosphor-react'; -import React, { PropsWithChildren } from 'react'; +import React, { PropsWithChildren, useEffect } from 'react'; import { NavLink, NavLinkProps } from 'react-router-dom'; import { Location, @@ -51,6 +51,16 @@ export function Sidebar() { const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary(); const debugState = useDebugState(); + useEffect(() => { + // Prevent the dropdown button to be auto focused on launch + // Hacky but it works + setTimeout(() => { + if (!document.activeElement || !('blur' in document.activeElement)) return; + + (document.activeElement.blur as () => void)(); + }); + }); + return (