From 1d8105a84a265b6e381f5f93cf116f6f397d3b9d Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 28 Jan 2022 21:36:41 +0800
Subject: [PATCH] Stop autoplay-next countdown when any input is in focus.

## Issue
On large screens, the comment field and autoplay countdown can both be visible at the same time. The currently code only stops the timer when the countdown component is not visible on screen.

The page annoyingly navigates away while typing.

## Change
When servicing the timer, check if the current active element is an input type. As far as I know, there is no React equivalent for this.
---
 ui/component/autoplayCountdown/view.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 9aa6eb4ed..1527fdb91 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -45,9 +45,16 @@ function AutoplayCountdown(props: Props) {
   const anyModalPresent = modal !== undefined && modal !== null;
   const isTimerPaused = timerPaused || anyModalPresent;
 
+  function isAnyInputFocused() {
+    const activeElement = document.activeElement;
+    const inputTypes = ['input', 'select', 'textarea'];
+    return activeElement && inputTypes.includes(activeElement.tagName.toLowerCase());
+  }
+
   function shouldPauseAutoplay() {
+    // TODO: use ref instead querySelector
     const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
-    return elm && elm.getBoundingClientRect().top < 0;
+    return isAnyInputFocused() || (elm && elm.getBoundingClientRect().top < 0);
   }
 
   function getMsgPlayingNext() {
@@ -75,7 +82,7 @@ function AutoplayCountdown(props: Props) {
   React.useEffect(() => {
     let interval;
     if (!timerCanceled && nextRecommendedUri) {
-      if (isTimerPaused) {
+      if (isTimerPaused || isAnyInputFocused()) {
         clearInterval(interval);
         setTimer(countdownTime);
       } else {