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 (