src/components/floor-plan/modal/lineTypes/RightAngle.jsx

@@ -4,6 +4,18 @@ import { onlyNumberInputChange } from '@/util/input-utils'
 export default function RightAngle({ props }) {
   const { getMessage } = useMessage()
   const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
+
+  const handleClickArrow = (arrow) => {
+    const arrowType = arrow === '↑' ? 'ArrowUp' : arrow === '↓' ? 'ArrowDown' : arrow === '←' ? 'ArrowLeft' : arrow === '→' ? 'ArrowRight' : ''
+    setArrow2(arrow)
+    const originLeng2Val = length2Ref.current.value
+    if (originLeng2Val === '') {
+      length2Ref.current.value = '0'
+    }
+    length2Ref.current.focus()
+    length2Ref.current.value = originLeng2Val
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: arrowType }))
+  }
   return (
     <div className="outline-wrap">
       <div className="outline-inner">
@@ -89,29 +101,25 @@ export default function RightAngle({ props }) {
             <button
               className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('↑')
+                handleClickArrow('↑')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
               }}
             ></button>
             <button
               className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('↓')
+                handleClickArrow('↓')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
               }}
             ></button>
             <button
               className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('←')
+                handleClickArrow('←')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
               }}
             ></button>
             <button
               className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
               onClick={() => {
-                setArrow2('→')
+                handleClickArrow('→')
-                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
               }}
             ></button>
           </div>