From 84ba2dc937b3af5acdf6bdcf381f7e0ba8bbc8be Mon Sep 17 00:00:00 2001
From: Serge K Lebedev <hello@sergelebe.dev>
Date: Thu, 11 May 2023 10:06:56 +0600
Subject: [PATCH] Dropdown selected element highlighting (#75255)

## About The Pull Request
This PR makes selected elements in Dropdowns to be highlighted.
Without this:

![image](https://user-images.githubusercontent.com/5000549/236760396-5eb71a23-7b3d-4a9e-98d4-6bd4dc5fe1c7.png)
With this:

![image](https://user-images.githubusercontent.com/5000549/236758675-b2ab90a7-0482-492e-b911-9e59f827f6b8.png)
## Why It's Good For The Game
It's convenient to have this kind of selection indication, especially in
long lists.
## Changelog
:cl:
qol: Made selected elements highlighted in TGUI Dropdowns
/:cl:
---
 tgui/packages/tgui/components/Dropdown.tsx    | 21 +++++++++----------
 .../tgui/styles/components/Dropdown.scss      |  5 +++++
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/tgui/packages/tgui/components/Dropdown.tsx b/tgui/packages/tgui/components/Dropdown.tsx
index ba1815249ae..98e533d9ed9 100644
--- a/tgui/packages/tgui/components/Dropdown.tsx
+++ b/tgui/packages/tgui/components/Dropdown.tsx
@@ -69,20 +69,16 @@ export class Dropdown extends Component<DropdownProps, DropdownState> {
       Dropdown.currentOpenMenu?.getBoundingClientRect() ?? NULL_RECT,
   };
   menuContents: any;
-  handleClick: any;
   state: DropdownState = {
     open: false,
+    selected: this.props.selected,
   };
 
-  constructor() {
-    super();
-
-    this.handleClick = () => {
-      if (this.state.open) {
-        this.setOpen(false);
-      }
-    };
-  }
+  handleClick = () => {
+    if (this.state.open) {
+      this.setOpen(false);
+    }
+  };
 
   getDOMNode() {
     return findDOMfromVNode(this.$LI, true);
@@ -170,7 +166,10 @@ export class Dropdown extends Component<DropdownProps, DropdownState> {
       return (
         <div
           key={value}
-          className="Dropdown__menuentry"
+          className={classes([
+            'Dropdown__menuentry',
+            this.state.selected === value && 'selected',
+          ])}
           onClick={() => {
             this.setSelected(value);
           }}>
diff --git a/tgui/packages/tgui/styles/components/Dropdown.scss b/tgui/packages/tgui/styles/components/Dropdown.scss
index a04913a61c9..78c7f7a5986 100644
--- a/tgui/packages/tgui/styles/components/Dropdown.scss
+++ b/tgui/packages/tgui/styles/components/Dropdown.scss
@@ -51,6 +51,11 @@
   line-height: base.em(17px);
   transition: background-color 100ms ease-out;
 
+  &.selected {
+    background-color: rgba(255, 255, 255, 0.5) !important;
+    transition: background-color 0ms;
+  }
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.2);
     transition: background-color 0ms;