Fixed UI fail when write characters in auto save interval input

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

@@ -68,13 +68,15 @@ function PlayerNavigation(props: Props): JSX.Element {
                     value={frameInputValue}
                     // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
                     onChange={(value: number | undefined) => {
-                        setFrameInputValue(
+                        if (typeof (value) === 'number') {
-                            Math.max(
+                            setFrameInputValue(
-                                Math.min(
+                                Math.max(
-                                    Number(value), stopFrame,
+                                    Math.min(
-                                ), startFrame,
+                                        Number(value), stopFrame,
-                            ),
+                                    ), startFrame,
-                        );
+                                ),
+                            );
+                        }
                     }}
                     onBlur={() => {
                         onInputChange(frameInputValue);

cvat-ui/src/components/settings-page/workspace-settings.tsx

@@ -4,15 +4,10 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
-    Col,
+import InputNumber from 'antd/lib/input-number';
-    Checkbox,
-    InputNumber,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 
 interface Props {
     autoSave: boolean;
@@ -37,6 +32,11 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
         onSwitchShowingInterpolatedTracks,
     } = props;
 
+    const minAutoSaveInterval = 5;
+    const maxAutoSaveInterval = 60;
+    const minAAMMargin = 0;
+    const maxAAMMargin = 1000;
+
     return (
         <div className='cvat-workspace-settings'>
             <Row type='flex'>
@@ -56,13 +56,19 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 <Col className='cvat-workspace-settings-auto-save-interval'>
                     <Text type='secondary'> Auto save every </Text>
                     <InputNumber
-                        min={5}
+                        min={minAutoSaveInterval}
-                        max={60}
+                        max={maxAutoSaveInterval}
                         step={1}
                         value={Math.round(autoSaveInterval / (60 * 1000))}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
+                            if (typeof (value) === 'number') {
-                                onChangeAutoSaveInterval(value * 60 * 1000);
+                                onChangeAutoSaveInterval(
+                                    Math.max(
+                                        Math.min(
+                                            Number(value), maxAutoSaveInterval,
+                                        ), minAutoSaveInterval,
+                                    ) * 60 * 1000,
+                                );
                             }
                         }}
                     />
@@ -89,12 +95,18 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 <Col>
                     <Text className='cvat-text-color'> Attribute annotation mode (AAM) zoom margin </Text>
                     <InputNumber
-                        min={0}
+                        min={minAAMMargin}
-                        max={1000}
+                        max={maxAAMMargin}
                         value={aamZoomMargin}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeAAMZoomMargin(value);
+                                onChangeAAMZoomMargin(
+                                    Math.max(
+                                        Math.min(
+                                            Number(value), maxAAMMargin,
+                                        ), minAAMMargin,
+                                    ),
+                                );
                             }
                         }}
                     />