From caeedf018a655b0711e9599588b98bd36346822e Mon Sep 17 00:00:00 2001
From: SyncIt21 <110812394+SyncIt21@users.noreply.github.com>
Date: Thu, 14 Mar 2024 01:04:48 +0530
Subject: [PATCH] Clicking sub sections in lathes will auto scroll to them
 (#81933)

## About The Pull Request
- Fixes #80931

To answer the question

> Would be valid to see if it's actually getting the element. if it is,
perhaps the issue is with section

I guess the problem is with the section because `getElementByID()`
requires the `div` element of the section to actually have an `id` which
we can retrive & scroll to.

I don't like the solution entirely as `key` & `id` are redundant and if
there was a way to access the `key` or some other way to access the
section without using `getElementByID()` I'm all up for it.

## Changelog
:cl:
fix: Clicking sub sections in the design menu of lathe's UIs will auto
scroll to them.
/:cl:
---
 tgui/packages/tgui/components/Section.tsx                   | 4 ++++
 tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tgui/packages/tgui/components/Section.tsx b/tgui/packages/tgui/components/Section.tsx
index a400324eadf..7718299b92e 100644
--- a/tgui/packages/tgui/components/Section.tsx
+++ b/tgui/packages/tgui/components/Section.tsx
@@ -23,6 +23,8 @@ type Props = Partial<{
   scrollableHorizontal: boolean;
   /** Title of the section. */
   title: ReactNode;
+  /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+  container_id: string;
   /** @member Callback function for the `scroll` event */
   onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
 }> &
@@ -67,6 +69,7 @@ export const Section = forwardRef(
       scrollable,
       scrollableHorizontal,
       title,
+      container_id,
       ...rest
     } = props;
 
@@ -87,6 +90,7 @@ export const Section = forwardRef(
 
     return (
       <div
+        id={container_id || ''}
         className={classes([
           'Section',
           fill && 'Section--fill',
diff --git a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
index 821f3713a2d..af5bddf4d5b 100644
--- a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
+++ b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
@@ -492,6 +492,7 @@ const CategoryView = <T extends Design = Design>(
     <Section
       title={category.title}
       key={category.anchorKey}
+      container_id={category.anchorKey}
       buttons={categoryButtons && categoryButtons(category)}
     >
       {body}