Merge pull request #10856 from VOREStation/vplk-tgui-input-qol2

Improve tgui alert and list input modals

tgui/packages/tgui/components/Section.tsx

@@ -39,6 +39,9 @@ export class Section extends Component<SectionProps> {
     if (this.scrollable) {
       addScrollableNode(this.scrollableRef.current);
     }
+    if (this.props.autoFocus) {
+      setTimeout(() => this.scrollableRef.current.focus(), 1);
+    }
   }
 
   componentWillUnmount() {

tgui/packages/tgui/interfaces/AlertModal.js

@@ -92,9 +92,9 @@ export class AlertModal extends Component {
                 </Flex>
               </Flex.Item>
               <Flex.Item my={2}>
-                <Flex className="AlertModal__Buttons">
+                <Flex className="AlertModal__Buttons" wrap>
                   {buttons.map((button, buttonIndex) => (
-                    <Flex.Item key={buttonIndex} mx={1}>
+                    <Flex.Item key={buttonIndex} mx={1} my={0.5}>
                       <div
                         ref={this.buttonRefs[buttonIndex]}
                         className="Button Button--color--default"

tgui/packages/tgui/interfaces/ListInput.js

@@ -7,7 +7,7 @@
 import { clamp01 } from 'common/math';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Section, Input, Stack } from '../components';
-import { KEY_DOWN, KEY_UP, KEY_ENTER, KEY_SPACE } from 'common/keycodes';
+import { KEY_DOWN, KEY_UP, KEY_ENTER, KEY_SPACE, KEY_ESCAPE, KEY_HOME, KEY_END } from 'common/keycodes';
 import { Window } from '../layouts';
 
 let lastScrollTime = 0;
@@ -47,6 +47,14 @@ export const ListInput = (props, context) => {
     }
     lastScrollTime = performance.now() + 125;
 
+    if (e.keyCode === KEY_HOME || e.keyCode === KEY_END) {
+      let index = e.keyCode === KEY_HOME ? 0 : buttons.length - 1;
+      setSelectedButton(buttons[index]);
+      setLastCharCode(null);
+      document.getElementById(buttons[index]).focus();
+      return;
+    }
+
     if (e.keyCode === KEY_UP || e.keyCode === KEY_DOWN) {
       let direction = 1;
       if (e.keyCode === KEY_UP) direction = -1;
@@ -69,6 +77,11 @@ export const ListInput = (props, context) => {
       return;
     }
 
+    if (e.keyCode === KEY_ESCAPE) {
+      act("cancel");
+      return;
+    }
+
     const charCode = String.fromCharCode(e.keyCode).toLowerCase();
     if (!charCode) return;
 
@@ -116,6 +129,7 @@ export const ListInput = (props, context) => {
             <Section
               fill
               scrollable
+              autoFocus
               className="ListInput__Section"
               title={message}
               tabIndex={0}