fix(clerk-js): Disable scroll to top for OrganizationProfile navbar

Author: desiprisg

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx

@@ -12,12 +12,14 @@ const organizationProfileRoutes: NavbarRoute[] = [
     id: 'members',
     icon: User,
     path: '/',
+    scroll: false,
   },
   {
     name: localizationKeys('organizationProfile.start.headerTitle__settings'),
     id: 'settings',
     icon: CogFilled,
     path: 'organization-settings',
+    scroll: false,
   },
 ];
 

packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx

@@ -11,12 +11,14 @@ const userProfileRoutes: NavbarRoute[] = [
     id: 'account',
     icon: User,
     path: '/',
+    scroll: true,
   },
   {
     name: localizationKeys('userProfile.start.headerTitle__security'),
     id: 'security',
     icon: TickShield,
     path: '',
+    scroll: true,
   },
 ];
 

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -22,15 +22,21 @@ type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void
 export const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] =
   createContextAndHook<NavbarContextValue>('NavbarContext');
 
-export const NavbarContextProvider = (props: React.PropsWithChildren<{}>) => {
+export const NavbarContextProvider = (props: React.PropsWithChildren<Record<never, never>>) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const open = React.useCallback(() => setIsOpen(true), []);
   const close = React.useCallback(() => setIsOpen(false), []);
   const value = React.useMemo(() => ({ value: { isOpen, open, close } }), [isOpen]);
   return <NavbarContext.Provider value={value}>{props.children}</NavbarContext.Provider>;
 };
 
-export type NavbarRoute = { name: LocalizationKey; id: string; icon: React.ComponentType; path: string };
+export type NavbarRoute = {
+  name: LocalizationKey;
+  id: string;
+  icon: React.ComponentType;
+  path: string;
+  scroll: boolean;
+};
 type RouteId = NavbarRoute['id'];
 type NavBarProps = {
   contentRef: React.RefObject<HTMLDivElement>;
@@ -59,8 +65,10 @@ export const NavBar = (props: NavBarProps) => {
       } else {
         await navigate(route.path);
       }
-      const el = contentRef.current?.querySelector(getSectionId(route.id));
-      el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      if (route.scroll) {
+        const el = contentRef.current?.querySelector(getSectionId(route.id));
+        el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
     }
   };
 
@@ -135,7 +143,7 @@ export const NavBar = (props: NavBarProps) => {
   );
 };
 
-const NavbarContainer = (props: React.PropsWithChildren<{}>) => {
+const NavbarContainer = (props: React.PropsWithChildren<Record<never, never>>) => {
   return (
     <Col
       elementDescriptor={descriptors.navbar}
@@ -154,7 +162,7 @@ const NavbarContainer = (props: React.PropsWithChildren<{}>) => {
   );
 };
 
-const MobileNavbarContainer = (props: React.PropsWithChildren<{}>) => {
+const MobileNavbarContainer = (props: React.PropsWithChildren<Record<never, never>>) => {
   const navbarContext = useNavbarContext();
   const { floating, isOpen, open, close } = usePopover({ defaultOpen: false, autoUpdate: false });