FRONTEND/src/components/BottomToolBar.tsx

@@ -11,7 +11,7 @@ import {
   Tabs,
   Text,
 } from "@mantine/core";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import classes from "./Component.module.css";
 import type { IScenario, TLine, TStation } from "../untils/types";
 import type { Socket } from "socket.io-client";
@@ -64,9 +64,16 @@ const BottomToolBar = ({
       : null;
   }, []);
   const [valueInput, setValueInput] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
   // const [activeTabBottom, setActiveTabBottom] = useState<string>("command");
   // const [isExpand, setIsExpand] = useState<boolean>(true);
 
+  useEffect(() => {
+    if (selectedLines?.length > 1 && inputRef?.current) {
+      inputRef?.current?.focus();
+    }
+  }, [selectedLines?.length]);
+
   return (
     <motion.div
       initial={false}
@@ -224,6 +231,7 @@ const BottomToolBar = ({
                     </Flex>
                     <Box>
                       <Input
+                        ref={inputRef}
                         style={{
                           width: "30vw",
                           boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",