Sayali: add onMouseDown preventDefault to fix Firefox timer button double-click bug

src/components/TeamMemberTasks/TeamMemberTasks.jsx

@@ -78,7 +78,10 @@ const TeamMemberTasks = React.memo(props => {
 
   // Fetch all selections in ONE call once teamList is ready
   useEffect(() => {
-    if (usersWithTasks.length === 0) return;
+    if (usersWithTasks.length === 0) {
+      setSelectionsLoaded(true);
+      return;
+    }
     const userIds = usersWithTasks.map(u => u.personId);
     axios
       .post(ENDPOINTS.USER_STATE_SELECTIONS_BATCH, { userIds })

src/components/Timer/Countdown.jsx

@@ -1,21 +1,21 @@
+import cs from 'classnames';
+import moment from 'moment';
+import { useRef, useState } from 'react';
 import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar';
-import { Input } from 'reactstrap';
 import {
+  BsArrowCounterclockwise,
   BsFillPenFill,
+  BsHourglassBottom,
+  BsHourglassSplit,
+  BsHourglassTop,
   BsPauseFill,
   BsPlay,
   BsStopFill,
-  BsArrowCounterclockwise,
-  BsHourglassTop,
-  BsHourglassSplit,
-  BsHourglassBottom,
   BsXLg,
 } from 'react-icons/bs';
-import { FaSave, FaAngleUp, FaAngleDown } from 'react-icons/fa';
-import moment from 'moment';
-import { useRef, useState } from 'react';
-import cs from 'classnames';
+import { FaAngleDown, FaAngleUp, FaSave } from 'react-icons/fa';
 import { toast } from 'react-toastify';
+import { Input } from 'reactstrap';
 import css from './Countdown.module.css';
 
 function getClockIcon(index) {
@@ -208,15 +208,25 @@ export default function Countdown({
             </div>
             <div className={css.operators}>
               {running ? (
-                <button type="button" onClick={sendPause} aria-label="Pause timer">
+                <button
+                  type="button"
+                  onClick={sendPause}
+                  onMouseDown={e => e.preventDefault()}
+                  aria-label="Pause timer"
+                >
                   <BsPauseFill
                     className={cs(css.transitionColor, css.operator)}
                     fontSize="2.5rem"
                     title="Pause timer"
                   />
                 </button>
               ) : (
-                <button type="button" onClick={handleStartButton} aria-label="Start timer">
+                <button
+                  type="button"
+                  onClick={handleStartButton}
+                  onMouseDown={e => e.preventDefault()}
+                  aria-label="Start timer"
+                >
                   <BsPlay
                     className={cs(
                       css.transitionColor,

src/components/Timer/Timer.jsx

@@ -1,30 +1,29 @@
 /* eslint-disable jsx-a11y/media-has-caption */
+import cs from 'classnames';
 import moment from 'moment';
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Progress } from 'reactstrap';
-import useWebSocket, { ReadyState } from 'react-use-websocket';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { BsAlarmFill, BsArrowClockwise } from 'react-icons/bs';
 import {
-  FaPlusCircle,
   FaMinusCircle,
-  FaPlayCircle,
   FaPauseCircle,
+  FaPlayCircle,
+  FaPlusCircle,
   FaStopCircle,
   FaUndoAlt,
 } from 'react-icons/fa';
-import { toast } from 'react-toastify';
-import cs from 'classnames';
 import { connect, useDispatch } from 'react-redux';
-import css from './Timer.module.css';
-import '../Header/index.css';
+import { toast } from 'react-toastify';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Progress } from 'reactstrap';
 import { ENDPOINTS } from '~/utils/URL';
 import config from '../../config.json';
+import '../Header/index.css';
 import TimeEntryForm from '../Timelog/TimeEntryForm';
 import Countdown from './Countdown';
-import TimerStatus from './TimerStatus';
+import css from './Timer.module.css';
 import TimerPopout from './TimerPopout';
-import { postTimeEntry, editTimeEntry } from '../../actions/timeEntries';
+import TimerStatus from './TimerStatus';
 
 function Timer({ authUser, darkMode, isPopout }) {
   const dispatch = useDispatch();