Added tricky handling of a caret position in input element (#1923)

* Added tricky handling of a caret position in input element

* Updated changelog

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Image compression` definition mismatch (<https://github.com/opencv/cvat/issues/1900>)
 - Points are dublicated during polygon interpolation sometimes (<https://github.com/opencv/cvat/pull/1892>)
 - When redraw a shape with activated autobordering, previous points are visible (<https://github.com/opencv/cvat/pull/1892>)
+- No mapping between side object element and context menu in some attributes (<https://github.com/opencv/cvat/pull/1923>)
 
 ### Security
 -

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx

@@ -28,7 +28,7 @@ export default function CanvasContextMenu(props: Props): JSX.Element | null {
 
     return ReactDOM.createPortal(
         <div className='cvat-canvas-context-menu' style={{ top, left }}>
-            <ObjectItemContainer clientID={activatedStateID} />
+            <ObjectItemContainer key={activatedStateID} clientID={activatedStateID} />
         </div>,
         window.document.body,
     );

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-attribute.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Col } from 'antd/lib/grid';
 import Select from 'antd/lib/select';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
@@ -124,7 +124,6 @@ function ItemAttributeComponent(props: Props): JSX.Element {
 
     if (attrInputType === 'number') {
         const [min, max, step] = attrValues.map((value: string): number => +value);
-
         return (
             <>
                 <Col span={8} style={attrNameStyle}>
@@ -153,6 +152,25 @@ function ItemAttributeComponent(props: Props): JSX.Element {
         );
     }
 
+    const ref = useRef<Input>(null);
+    const [selection, setSelection] = useState<{
+        start: number | null;
+        end: number | null;
+        direction: 'forward' | 'backward' | 'none' | null;
+    }>({
+        start: null,
+        end: null,
+        direction: null,
+    });
+
+    useEffect(() => {
+        if (ref.current && ref.current.input) {
+            ref.current.input.selectionStart = selection.start;
+            ref.current.input.selectionEnd = selection.end;
+            ref.current.input.selectionDirection = selection.direction;
+        }
+    }, [attrValue]);
+
     return (
         <>
             <Col span={8} style={attrNameStyle}>
@@ -162,11 +180,20 @@ function ItemAttributeComponent(props: Props): JSX.Element {
             </Col>
             <Col span={16}>
                 <Input
+                    ref={ref}
                     size='small'
                     onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
+                        if (ref.current && ref.current.input) {
+                            setSelection({
+                                start: ref.current.input.selectionStart,
+                                end: ref.current.input.selectionEnd,
+                                direction: ref.current.input.selectionDirection,
+                            });
+                        }
+
                         changeAttribute(attrID, event.target.value);
                     }}
-                    defaultValue={attrValue}
+                    value={attrValue}
                     className='cvat-object-item-text-attribute'
                 />
             </Col>