fix open popup algo

src/Routes/Tables/Algorithms/AlgorithmActions.react.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -36,6 +36,8 @@ const deleteConfirmAction = action => {
 const overlayStyle = { width: `50ch` };
 
 const AlgorithmActions = ({ record }) => {
+  const [openPopupRun, setOpenPopupRun] = useState(false);
+  const [openPopupRunDebug, setOpenPopupRunDebug] = useState(false);
   const { goTo } = usePath();
   const { builds, ...algorithm } = record;
   const { name } = algorithm;
@@ -56,20 +58,20 @@ const AlgorithmActions = ({ record }) => {
   //   [applyAlgorithm]
   // );
 
-  const onEdit = useCallback(() => goTo.edit({ nextAlgorithmId: name }), [
-    goTo,
-    name,
-  ]);
+  const onEdit = useCallback(
+    () => goTo.edit({ nextAlgorithmId: name }),
+    [goTo, name]
+  );
 
   const onClickDelete = useCallback(
     () => deleteConfirmAction(() => deleteAlgorithm(name)),
     [deleteAlgorithm, name]
   );
 
-  const onRun = useCallback(input => runAlgorithm({ name, input }), [
-    runAlgorithm,
-    name,
-  ]);
+  const onRun = useCallback(
+    input => runAlgorithm({ name, input }),
+    [runAlgorithm, name]
+  );
 
   const onDebug = useCallback(
     input => runAlgorithm({ name, input, debug: true }),
@@ -88,6 +90,24 @@ const AlgorithmActions = ({ record }) => {
     e.stopPropagation();
   }, []);
 
+  const clickOnRunAlg = useCallback(() => {
+    onRun();
+    setOpenPopupRun(false);
+  }, [onRun]);
+
+  const handleOpenChange = useCallback(newOpen => {
+    setOpenPopupRun(newOpen);
+  }, []);
+
+  const clickOnRunDebug = useCallback(() => {
+    onDebug();
+    setOpenPopupRunDebug(false);
+  }, [onDebug]);
+
+  const handleOpenChangeDebug = useCallback(newOpen => {
+    setOpenPopupRunDebug(newOpen);
+  }, []);
+
   return (
     <div
       ref={container}
@@ -102,8 +122,13 @@ const AlgorithmActions = ({ record }) => {
           content={popOverContentRun}
           getPopupContainer={setPopupContainer}
           mouseLeaveDelay={0.3}
-          mouseEnterDelay={1}>
-          <Button icon={<PlayCircleOutlined />} onClick={() => onRun()} />
+          mouseEnterDelay={2}
+          open={openPopupRun}
+          onOpenChange={handleOpenChange}>
+          <Button
+            icon={<PlayCircleOutlined />}
+            onClick={() => clickOnRunAlg()}
+          />
         </Popover>
         <Popover
           overlayStyle={overlayStyle}
@@ -112,8 +137,10 @@ const AlgorithmActions = ({ record }) => {
           content={popOverContentDebug}
           getPopupContainer={setPopupContainer}
           mouseLeaveDelay={0.3}
-          mouseEnterDelay={1}>
-          <Button icon={<BugOutlined />} onClick={() => onDebug()} />
+          mouseEnterDelay={2}
+          open={openPopupRunDebug}
+          onOpenChange={handleOpenChangeDebug}>
+          <Button icon={<BugOutlined />} onClick={() => clickOnRunDebug()} />
         </Popover>
         <Tooltip title="edit algorithm">
           <Button icon={<EditOutlined />} onClick={onEdit} />

src/components/common/SignBoard.react.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Button, Space, Popover, Divider, Row, Col, Input } from 'antd';
 import _ from 'lodash';
@@ -23,11 +23,17 @@ const SignBoard = ({
   restField,
 }) => {
   const { TextArea } = Input;
+  const inputRef = useRef(null);
+  const [cursorPosition, setCursorPosition] = useState(null);
 
   const styleButtons = {
     flexWrap: 'wrap',
   };
 
+  const setPosition = () => {
+    setCursorPosition(inputRef.current.input.selectionStart);
+  };
+
   const getValuesInput = nameKey => {
     const fields = form.getFieldsValue();
     const currentNameField = ['listKeyValue', ...nameRef, ...nameKey];
@@ -38,20 +44,49 @@ const SignBoard = ({
 
   const writeCharsToInput = (nameKey, value) => {
     const { fields, currentNameField, lastValue } = getValuesInput(nameKey);
-    _.set(fields, currentNameField, `${lastValue} ${value}`);
+    const updatedValue =
+      lastValue.slice(0, cursorPosition) +
+      value +
+      lastValue.slice(cursorPosition);
+
+    _.set(fields, currentNameField, updatedValue);
+
+    // new postion cursor
+    const newProstionCursor = cursorPosition + value.length;
+    setCursorPosition(newProstionCursor);
+
+    inputRef.current.focus();
+    setTimeout(() => {
+      inputRef.current.setSelectionRange(newProstionCursor, newProstionCursor);
+    }, 2);
+
     form.setFieldsValue(fields);
     onChange();
   };
 
   const DeleteCharsInInput = nameKey => {
-    const { fields, currentNameField, lastValue } = getValuesInput(nameKey);
-    _.set(
-      fields,
-      currentNameField,
-      lastValue.substring(0, lastValue.lastIndexOf(' '))
-    );
-    form.setFieldsValue(fields);
-    onChange();
+    if (cursorPosition > 0) {
+      const { fields, currentNameField, lastValue } = getValuesInput(nameKey);
+
+      const newProstionCursor = cursorPosition - 1;
+      setCursorPosition(newProstionCursor);
+
+      const updatedValue =
+        lastValue.slice(0, newProstionCursor) + lastValue.slice(cursorPosition);
+
+      inputRef.current.focus();
+      setTimeout(() => {
+        inputRef.current.setSelectionRange(
+          newProstionCursor,
+          newProstionCursor
+        );
+      }, 2);
+
+      _.set(fields, currentNameField, updatedValue);
+
+      form.setFieldsValue(fields);
+      onChange();
+    }
   };
 
   const title = nameKey => {
@@ -110,19 +145,23 @@ const SignBoard = ({
         rules={msgRules}
         initialValue=""
         onChange={onChange}
+        onClick={setPosition}
         key={`inputTextItem${indexKey}`}>
         {type === 'text' ? (
           <Input
+            ref={inputRef}
             key={`inputText${indexKey}`}
             style={{ width }}
             placeholder={placeholder}
             autoComplete="off"
+            onKeyUp={setPosition}
           />
         ) : (
           <TextArea
             key={`TextArea${indexKey}`}
             style={{ width }}
             placeholder={placeholder}
+            onKeyUp={setPosition}
           />
         )}
       </Form.Item>