Multitabs: Fix draft sync issue (#2731)

src/hooks/useBackgroundMode.ts

@@ -1,30 +1,44 @@
-import { useEffect } from '../lib/teact/teact';
+import { useCallback, useEffect, useRef } from '../lib/teact/teact';
 
 export default function useBackgroundMode(
   onBlur?: AnyToVoidFunction,
   onFocus?: AnyToVoidFunction,
 ) {
+  const wasBlurred = useRef<boolean>(false);
+  const handleBlur = useCallback(() => {
+    if (wasBlurred.current) {
+      return;
+    }
+
+    onBlur?.();
+    wasBlurred.current = true;
+  }, [onBlur]);
+  const handleFocus = useCallback(() => {
+    onFocus?.();
+    wasBlurred.current = false;
+  }, [onFocus]);
+
   useEffect(() => {
     if (onBlur && !document.hasFocus()) {
-      onBlur();
+      handleBlur();
     }
 
     if (onBlur) {
-      window.addEventListener('blur', onBlur);
+      window.addEventListener('blur', handleBlur);
     }
 
     if (onFocus) {
-      window.addEventListener('focus', onFocus);
+      window.addEventListener('focus', handleFocus);
     }
 
     return () => {
       if (onFocus) {
-        window.removeEventListener('focus', onFocus);
+        window.removeEventListener('focus', handleFocus);
       }
 
       if (onBlur) {
-        window.removeEventListener('blur', onBlur);
+        window.removeEventListener('blur', handleBlur);
       }
     };
-  }, [onBlur, onFocus]);
+  }, [handleBlur, handleFocus, onBlur, onFocus]);
 }