From 4eeb94d3ba72856166f263cf08fc977f4f3ca953 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Tue, 24 Mar 2020 18:50:15 +0300
Subject: [PATCH] Validation for frame input value

---
 .../top-bar/player-navigation.tsx             | 37 ++++++++++++-------
 .../annotation-page/top-bar/top-bar.tsx       |  8 +---
 .../annotation-page/top-bar/top-bar.tsx       |  2 +-
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
index 397bf8d6..93d25911 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
@@ -2,18 +2,13 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useState } from 'react';
 
-import {
-    Row,
-    Col,
-    Icon,
-    Slider,
-    Tooltip,
-    InputNumber,
-} from 'antd';
-
-import { SliderValue } from 'antd/lib/slider';
+import { Row, Col } from 'antd/lib/grid';
+import Icon from 'antd/lib/icon';
+import Slider, { SliderValue } from 'antd/lib/slider';
+import Tooltip from 'antd/lib/tooltip';
+import InputNumber from 'antd/lib/input-number';
 import Text from 'antd/lib/typography/Text';
 
 interface Props {
@@ -37,6 +32,8 @@ function PlayerNavigation(props: Props): JSX.Element {
         onURLIconClick,
     } = props;
 
+    const [frameInputValue, setFrameInputValue] = useState<number | undefined>(frameNumber);
+
     return (
         <>
             <Col className='cvat-player-controls'>
@@ -68,9 +65,23 @@ function PlayerNavigation(props: Props): JSX.Element {
                 <InputNumber
                     className='cvat-player-frame-selector'
                     type='number'
-                    value={frameNumber || 0}
+                    value={frameInputValue}
                     // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
-                    onChange={onInputChange}
+                    onChange={(value: number | undefined) => {
+                        setFrameInputValue(
+                            Math.max(
+                                Math.min(
+                                    Number(value), stopFrame,
+                                ), startFrame,
+                            ),
+                        );
+                    }}
+                    onBlur={() => {
+                        onInputChange(frameInputValue);
+                    }}
+                    onPressEnter={() => {
+                        onInputChange(frameInputValue);
+                    }}
                     ref={inputFrameRef}
                 />
             </Col>
diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
index 370702fe..5942fbae 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
@@ -4,12 +4,8 @@
 
 import React from 'react';
 
-import {
-    Row,
-    Col,
-    InputNumber,
-} from 'antd';
-
+import { Row, Col } from 'antd/lib/grid';
+import InputNumber from 'antd/lib/input-number';
 import { SliderValue } from 'antd/lib/slider';
 
 import { Workspace } from 'reducers/interfaces';
diff --git a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
index 48695dbe..ebde5bd3 100644
--- a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
+++ b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx
@@ -10,7 +10,7 @@ import { withRouter } from 'react-router';
 import { RouteComponentProps } from 'react-router-dom';
 import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
 
-import { InputNumber } from 'antd';
+import InputNumber from 'antd/lib/input-number';
 import { SliderValue } from 'antd/lib/slider';
 
 import {