skbkontur · Arooba-git · Feb 9, 2023
diff --git a/packages/react-ui-testing/TestPages/src/components/TestPages/InputTestPage.jsx b/packages/react-ui-testing/TestPages/src/components/TestPages/InputTestPage.jsx
@@ -5,6 +5,7 @@ import { Input } from '@skbkontur/react-ui/components/Input';
 import { CaseSuite, Case } from '../Case';
 
 export default class InputTextPage extends React.Component {
+  private static timeOutID;
   state = {
     simpleInputValue: '',
     inputWithDelayValue: '',
@@ -42,7 +43,7 @@ export default class InputTextPage extends React.Component {
               data-tid="ShowInputAppearsAfterTimeout"
               onClick={() =>
                 !this.state.showInput
-                  ? setTimeout(() => this.setState({ showInput: true }), 2000)
+                  ? InputTextPage.timeOutID = setTimeout(() => this.setState({ showInput: true }), 2000)
                   : this.setState({ showInput: false })
               }
             >
@@ -76,4 +77,8 @@ export default class InputTextPage extends React.Component {
       </CaseSuite>
     );
   }
+
+  componentWillUnmount() {
+    clearTimeout(InputTextPage.timeOutID);
+  }
 }
diff --git a/packages/react-ui-validations/src/ValidationWrapperInternal.tsx b/packages/react-ui-validations/src/ValidationWrapperInternal.tsx
@@ -51,6 +51,7 @@ export class ValidationWrapperInternal extends React.Component<
   ValidationWrapperInternalProps,
   ValidationWrapperInternalState
 > {
+  private static timeOutID: any;
   public state: ValidationWrapperInternalState = {
     validation: null,
   };
@@ -76,6 +77,7 @@ export class ValidationWrapperInternal extends React.Component<
 
   public componentWillUnmount() {
     this.context.unregister(this);
+    clearTimeout(ValidationWrapperInternal.timeOutID);
   }
 
   public componentDidUpdate() {
@@ -199,7 +201,7 @@ export class ValidationWrapperInternal extends React.Component<
   }
 
   private handleBlur() {
-    setTimeout(() => {
+    ValidationWrapperInternal.timeOutID = setTimeout(() => {
       this.processBlur();
       if (!this.isIndependent()) {
         this.context.instanceProcessBlur(this);

diff --git a/packages/react-ui/components/GlobalLoader/__stories__/GlobalLoader.stories.tsx b/packages/react-ui/components/GlobalLoader/__stories__/GlobalLoader.stories.tsx
@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Select, Toast, GlobalLoader, Button } from '@skbkontur/react-ui';
 
 import { Story } from '../../../typings/stories';
 
 function GlobalLoaderWithProps() {
+  const timeOutID: any = useRef(null);
+  const timeOutID2: any = useRef(null);
+  const timeOutID3: any = useRef(null);
   const [error, setError] = React.useState(false);
   const [active, setActive] = React.useState(false);
 
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeOutID.current);
+      clearTimeout(timeOutID2.current);
+      clearTimeout(timeOutID3.current);
+    };
+  }, []);
+
   return (
     <div>
       <Button onClick={showGlobalLoaderWithProps}>Show Global Loader</Button>
@@ -21,15 +32,15 @@ function GlobalLoaderWithProps() {
   );
 
   function showGlobalLoaderWithProps() {
-    setTimeout(() => {
+    timeOutID.current = setTimeout(() => {
       setActive(true);
     }, 1000);
 
-    setTimeout(() => {
+    timeOutID2.current = setTimeout(() => {
       setError(true);
     }, 10000);
 
-    setTimeout(() => {
+    timeOutID3.current = setTimeout(() => {
       setActive(false);
     }, 30000);
   }
@@ -64,13 +75,23 @@ function GlobalLoaderWithStaticMethods() {
 }
 
 function GlobalLoaderWithTimer() {
+  const intervalID: any = useRef(null);
+  const timeOutID: any = useRef(null);
   const [active, setActive] = React.useState(false);
   const [time, setTime] = React.useState(1);
   const [timerTime, setTimerTime] = React.useState(0);
   const [expectedResponseTime, setExpectedResponseTime] = React.useState(2);
   const [done, setDone] = React.useState(true);
   const times = [0.5, 1, 2, 4, 8, 16];
   let timer: ReturnType<typeof setInterval> | null = null;
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeOutID.current);
+      clearInterval(intervalID.current);
+    };
+  }, []);
+
   return (
     <div>
       <div>
@@ -103,15 +124,15 @@ function GlobalLoaderWithTimer() {
     setDone(false);
     setTimerTime(0);
     startTimer();
-    setTimeout(() => {
+    timeOutID.current = setTimeout(() => {
       setActive(false);
       Toast.push('Загрузка завершена');
     }, time * 1000);
   }
   function startTimer() {
     if (!timer) {
       let currentTime = 0;
-      timer = setInterval(() => {
+      timer = intervalID.current = setInterval(() => {
         setTimerTime(currentTime);
         currentTime += 100;
         if (currentTime > time * 1000) {

diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx
@@ -122,6 +122,7 @@ type DefaultProps = Required<Pick<InputProps, 'size'>>;
  */
 @rootNode
 export class Input extends React.Component<InputProps, InputState> {
+  private static timeOutID: any;
   public static __KONTUR_REACT_UI__ = 'Input';
 
   public static defaultProps: DefaultProps = {
@@ -147,6 +148,7 @@ export class Input extends React.Component<InputProps, InputState> {
       clearTimeout(this.blinkTimeout);
     }
     this.cancelDelayedSelectAll();
+    clearTimeout(Input.timeOutID);
   }
 
   /**
@@ -204,7 +206,7 @@ export class Input extends React.Component<InputProps, InputState> {
       this.focus();
     }
     if (this.props.mask && this.props.value && this.props.value?.length < this.props.mask.length) {
-      setTimeout(() => {
+      Input.timeOutID = setTimeout(() => {
         this.input?.setSelectionRange(start, end);
       }, 150);
     } else {

diff --git a/packages/react-ui/components/Paging/Paging.tsx b/packages/react-ui/components/Paging/Paging.tsx
@@ -90,6 +90,7 @@ type DefaultProps = Required<
 @rootNode
 @locale('Paging', PagingLocaleHelper)
 export class Paging extends React.PureComponent<PagingProps, PagingState> {
+  private static timeOutID: any;
   public static __KONTUR_REACT_UI__ = 'Paging';
 
   public static defaultProps: DefaultProps = {
@@ -145,6 +146,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
 
   public componentWillUnmount() {
     this.removeGlobalListener();
+    clearTimeout(Paging.timeOutID);
   }
 
   public render() {
@@ -302,7 +304,7 @@ export class Paging extends React.PureComponent<PagingProps, PagingState> {
     if (isIE11) {
       // Клик по span внутри контейнера с tabindex="0" переносит фокус именно на этот span.
       // Поэтому горячие клавиши работают пока span существует на странице.
-      setTimeout(() => this.container && this.container.focus(), 0);
+      Paging.timeOutID = setTimeout(() => this.container && this.container.focus(), 0);
     }
   };
 

diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
@@ -174,6 +174,7 @@ type DefaultProps<TValue, TItem> = Required<
 // Suggested solutions break current behavior
 // eslint-disable-next-line @typescript-eslint/ban-types
 export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
+  private static timeOutID: any;
   public static __KONTUR_REACT_UI__ = 'Select';
 
   public static defaultProps: DefaultProps<unknown, ReactNode | ReactPortal> = {
@@ -538,7 +539,7 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
 
   private focusInput = (input: Input) => {
     // fix cases when an Input is rendered in portal
-    setTimeout(() => input?.focus(), 0);
+    Select.timeOutID = setTimeout(() => input?.focus(), 0);
   };
 
   private refMenu = (menu: Menu) => {
@@ -672,6 +673,10 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
         })
       : buttonElement;
   };
+
+  componentWillUnmount() {
+    clearTimeout(Select.timeOutID);
+  }
 }
 
 function renderValue<TValue, TItem>(value: TValue, item: Nullable<TItem>) {

diff --git a/packages/react-ui/components/Toast/Toast.tsx b/packages/react-ui/components/Toast/Toast.tsx
@@ -73,6 +73,7 @@ export class Toast extends React.Component<ToastProps, ToastState> {
 
   public componentWillUnmount() {
     this._clearTimer();
+    clearTimeout(this._timeout);
   }
 
   public render() {

diff --git a/packages/react-ui/hooks/useDrop.ts b/packages/react-ui/hooks/useDrop.ts
@@ -70,6 +70,7 @@ export const useDrop = <TElement extends IElementWithListener>(props: IUseDropPr
       ref.removeEventListener('dragleave', preventDefault);
       ref.removeEventListener('dragover', handleDragOver);
       ref.removeEventListener('drop', handleDrop);
+      clearTimeout(timerId.current);
     };
   }, [handleDrop, handleDragOver, preventDefault]);
 

diff --git a/packages/react-ui/internal/Calendar/Calendar.tsx b/packages/react-ui/internal/Calendar/Calendar.tsx
@@ -101,6 +101,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     if (this.animation.inProgress()) {
       this.animation.cancel();
     }
+    clearTimeout(this.wheelEndTimeout);
   }
 
   public render() {

diff --git a/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx b/packages/react-ui/internal/CustomComboBox/CustomComboBox.tsx
@@ -97,6 +97,8 @@ export const CustomComboBoxDataTids = {
 @responsiveLayout
 @rootNode
 export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {
+  private static timeOutID: any;
+  private static timeOutID2: any;
   public static __KONTUR_REACT_UI__ = 'CustomComboBox';
 
   public state: CustomComboBoxState<T> = DefaultState;
@@ -165,7 +167,7 @@ export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T
       this.loaderShowDelay = new Promise<void>((resolve) => {
         const cancelLoader = taskWithDelay(() => {
           this.dispatch({ type: 'RequestItems' });
-          setTimeout(resolve, LOADER_SHOW_TIME);
+          CustomComboBox.timeOutID = setTimeout(resolve, LOADER_SHOW_TIME);
         }, DELAY_BEFORE_SHOW_LOADER);
 
         cancelPromise.catch(() => cancelLoader());
@@ -385,7 +387,7 @@ export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T
     // workaround for the similar bug with focusout
     // in Firefox, Chrome and IE
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1363964
-    setTimeout(() => {
+    CustomComboBox.timeOutID2 = setTimeout(() => {
       this.dispatch({ type: 'Blur' });
     });
   };
@@ -408,4 +410,9 @@ export class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T
       this.dispatch({ type: 'InputClick' });
     }
   };
+
+  componentWillUnmount() {
+    clearTimeout(CustomComboBox.timeOutID);
+    clearTimeout(CustomComboBox.timeOutID2);
+  }
 }
diff --git a/packages/react-ui/internal/InputLikeText/InputLikeText.tsx b/packages/react-ui/internal/InputLikeText/InputLikeText.tsx
@@ -42,6 +42,9 @@ type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
 
 @rootNode
 export class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
+  private static timeOutID: any;
+  private static timeOutID2: any;
+  private static timeOutID3: any;
   public static __KONTUR_REACT_UI__ = 'InputLikeText';
 
   public static defaultProps: DefaultProps = { size: 'small' };
@@ -107,7 +110,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
     this.frozenBlur = true;
 
     this.lastSelectedInnerNode = [node, start, end];
-    setTimeout(() => selectNodeContents(node, start, end), 0);
+    InputLikeText.timeOutID = setTimeout(() => selectNodeContents(node, start, end), 0);
     if (this.focusTimeout) {
       clearInterval(this.focusTimeout);
     }
@@ -129,6 +132,10 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
     MouseDrag.stop(this.node);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    clearTimeout(this.focusTimeout);
+    clearTimeout(InputLikeText.timeOutID);
+    clearTimeout(InputLikeText.timeOutID2);
+    clearTimeout(InputLikeText.timeOutID3);
   }
 
   public render() {
@@ -368,7 +375,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
 
     if (isIE11 && isShortcutPaste(e) && this.hiddenInput) {
       this.frozen = true;
-      setTimeout(() => {
+      InputLikeText.timeOutID2 = setTimeout(() => {
         if (this.lastSelectedInnerNode) {
           this.selectInnerNode(...this.lastSelectedInnerNode);
         }
@@ -395,8 +402,7 @@ export class InputLikeText extends React.Component<InputLikeTextProps, InputLike
   };
 
   private handleMouseDragEnd: MouseDragEventHandler = (e) => {
-    // Дожидаемся onMouseUp
-    setTimeout(() => {
+    InputLikeText.timeOutID3 = setTimeout(() => {
       this.dragging = false;
 
       if (this.props.onMouseDragEnd) {