Validation for frame input value

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 {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Icon from 'antd/lib/icon';
-    Col,
+import Slider, { SliderValue } from 'antd/lib/slider';
-    Icon,
+import Tooltip from 'antd/lib/tooltip';
-    Slider,
+import InputNumber from 'antd/lib/input-number';
-    Tooltip,
-    InputNumber,
-} from 'antd';
-
-import { SliderValue } from 'antd/lib/slider';
 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>

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -4,12 +4,8 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import InputNumber from 'antd/lib/input-number';
-    Col,
-    InputNumber,
-} from 'antd';
-
 import { SliderValue } from 'antd/lib/slider';
 
 import { Workspace } from 'reducers/interfaces';

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 {