Merge pull request #217 from andy23512/prevent-safari-autofill

Fix contacts auto fill bug in Safari

src/pages/test/components/ChordTextInput.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement, useRef, useState } from 'react';
 import { useHUD } from '../../../hooks/useHUD';
 import usePopover from '../../../hooks/usePopover';
 import { useStoreActions, useStoreState } from '../../../store/store';
-import type { TrainingStoreModel } from '../../../../src/models/trainingStore';
 
 function ChordTextInput(): ReactElement {
   const setStoreText = useStoreActions(
@@ -97,16 +96,16 @@ function ChordTextInput(): ReactElement {
         autoCapitalize="none"
         className="relative bg-transparent caret-transparent focus:outline-none w-0 text-white font-bold text-center max-w-[60vw] border-b-2 border-solid border-transparent"
         ref={inputRef}
-        id="txt_Name"
+        id="chordsInput"
         autoFocus
         onBlurCapture={() => [
           setTextPromptUnFocused(true),
           setStartTimer(false),
         ]}
         onFocus={() =>
           isShowingPortal == true
-            ? document.getElementById('txt_Name')?.focus()
-            : document.getElementById('txt_Name')?.focus()
+            ? document.getElementById('chordsInput')?.focus()
+            : document.getElementById('chordsInput')?.focus()
         }
         value={textTyped}
         onChange={(e) => {

src/pages/test/components/ChordingEnabledAlgorithm.tsx

@@ -1,8 +1,5 @@
-import React, { ReactElement, useState } from 'react';
-import { FaBorderStyle } from 'react-icons/fa';
-import styled from 'styled-components';
-import { useStoreState, useStoreActions } from '../../../store/store';
-import { TrainingStoreModel } from '../../../../src/models/trainingStore';
+import { useState } from 'react';
+import { useStoreActions } from '../../../store/store';
 
 const [bestKeyTime, setBestKeyTime] = useState([]);
 const [letterPressed, setLetterPressed] = useState([]);
@@ -23,7 +20,7 @@ export const ChordingEnabledAlgorithm = (chordValue) => {
     performance.webkitNow ||
     Date.now * 1.0; /*none found - fallback to browser default */
 
-  const body = document.getElementById('txt_Name');
+  const body = document.getElementById('chordsInput');
   let isKeyDown = false;
   if (
     sessionStorage.getItem('chordingEnabledDevice') == undefined ||

src/pages/test/components/EditChordModal.tsx

@@ -1,9 +1,17 @@
 import React, { ReactElement, useRef, useState } from 'react';
 import { Portal } from 'react-portal';
 import styled from 'styled-components';
-import { chordLibrary, ChordLibraryRecord } from '../../../data/chordLibrary';
+import {
+  avgCalculatorForTheSpeedOfLastTen,
+  stmCalculator,
+} from '../../../../src/helpers/aggregation';
+import { ChordLibraryRecord, chordLibrary } from '../../../data/chordLibrary';
 import { useCurrentTrainingScenario } from '../../../hooks/useCurrentTrainingScenario';
 import usePopover from '../../../hooks/usePopover';
+import {
+  pickerLite,
+  pickerV1,
+} from '../../../models/keyboardDropDownFolder/keyboardDropDown';
 import type { TrainingScenario } from '../../../models/trainingScenario';
 import { useStoreActions, useStoreState } from '../../../store/store';
 import {
@@ -13,14 +21,6 @@ import {
 import HelpCircleIcon from './HelpCircleIcon';
 import { ThirdButton } from './ThirdButton';
 import { XIcon } from './XIcon';
-import {
-  pickerV1,
-  pickerLite,
-} from '../../../models/keyboardDropDownFolder/keyboardDropDown';
-import {
-  avgCalculatorForTheSpeedOfLastTen,
-  stmCalculator,
-} from '../../../../src/helpers/aggregation';
 
 export const triggerResizeForChordModal = () => {
   // This is done to make sure that the popover elements are in the correct position
@@ -185,7 +185,7 @@ function EditChordsModal(): ReactElement {
     }
 
     togglePortal();
-    document.getElementById('txt_Name')?.focus();
+    document.getElementById('chordsInput')?.focus();
   };
 
   const generateNewChordRecord = (chords: string[]): ChordLibraryRecord => {

src/pages/test/components/TextPrompt.tsx

@@ -1,9 +1,7 @@
 import React, { ReactElement, useState } from 'react';
-import { FaBorderStyle } from 'react-icons/fa';
 import styled from 'styled-components';
-import { useStoreState, useStoreActions } from '../../../store/store';
-import { wpmMethodCalculator } from '../../../../src/helpers/aggregation';
 import type { TrainingScenario } from '../../../../src/models/trainingScenario';
+import { useStoreActions, useStoreState } from '../../../store/store';
 
 const r = Math.random;
 
@@ -17,7 +15,7 @@ export function TextBlurredScreen() {
     <div
       className="wi from-green-800 bg-zinc-300 absolute w-full h-48 rounded-3xl pt-16 text-black"
       onClick={() => [
-        document.getElementById('txt_Name')?.focus(),
+        document.getElementById('chordsInput')?.focus(),
         setTextPromptUnFocused(false),
         setStartTimer(true),
       ]}
@@ -126,7 +124,7 @@ export function TextPrompt(): ReactElement {
       performance.webkitNow ||
       Date.now * 1.0; /*none found - fallback to browser default */
 
-    const body = document.getElementById('txt_Name');
+    const body = document.getElementById('chordsInput');
     let isKeyDown = false;
     //if(sessionStorage.getItem('chordingEnabledDevice') == undefined || sessionStorage.getItem('chordingEnabledDevice') == 'false'){
 
@@ -387,7 +385,7 @@ export function TextPrompt(): ReactElement {
 
     //This  code here handles the logic in the case the user back spaces to edit an errored word
     const input = document.getElementById(
-      'txt_Name',
+      'chordsInput',
     ) as unknown as HTMLInputElement;
     if (input != null) {
       input.onkeydown = (e) => {
@@ -455,7 +453,7 @@ export function TextPrompt(): ReactElement {
     let arr: string[] = [];
     const conditionalValue = allTypedText.length - indexOfTargetChord;
     const input = document.getElementById(
-      'txt_Name',
+      'chordsInput',
     ) as unknown as HTMLInputElement;
 
     if (
@@ -567,7 +565,9 @@ export function TextPrompt(): ReactElement {
   }
   //This function Handles the focus panel
   function isFocused() {
-    const inputValue = document.getElementById('txt_Name') as HTMLInputElement;
+    const inputValue = document.getElementById(
+      'chordsInput',
+    ) as HTMLInputElement;
     const isFocused = document.activeElement === inputValue;
     if (!isFocused) {
       return TextBlurredScreen();

src/pages/test/components/TrainingModeSelector.tsx

@@ -1,14 +1,12 @@
 import React, { ReactElement, useState } from 'react';
-import { useStoreActions, useStoreState } from '../../../store/store';
-import styled from 'styled-components';
-import { isNumber } from 'lodash';
 import type { TrainingLevels } from 'src/models/trainingLevels';
+import styled from 'styled-components';
 import { connectDeviceAndPopUp } from '../../../../src/pages/manager/components/connect';
 import { getId } from '../../../../src/pages/manager/components/getID';
+import { chordLibrary } from '../../../data/chordLibrary';
 import { useWordsPerMinute } from '../../../hooks/useWordsPerMinute';
 import { createEmptyChordStatistics } from '../../../models/trainingStatistics';
-import { chordLibrary } from '../../../data/chordLibrary';
-import EditChordsModal from './EditChordModal';
+import { useStoreActions, useStoreState } from '../../../store/store';
 
 export function TrainingModeSelector(): ReactElement {
   const beginTraining = useStoreActions(
@@ -96,7 +94,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(2),
               LearnPageFunction('TRIGRAM', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Trigrams
@@ -109,7 +107,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(3),
               LearnPageFunction('LEXICAL', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Words
@@ -122,7 +120,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(4),
               TestPageFunction('LEXICAL', 26),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Test
@@ -139,7 +137,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(1),
               LearnPageFunction('LEXICAL', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             English 300
@@ -152,7 +150,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(2),
               allChords(),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             All Chords
@@ -165,7 +163,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(3),
               LearnPageFunction('LEXICOGRAPHIC', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Custom
@@ -182,7 +180,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(1),
               LearnPageFunction('LEXICALSENTENCES', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Chords
@@ -195,7 +193,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(2),
               LearnPageFunction('LEXICALSENTENCESDUOS', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Duos
@@ -208,7 +206,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(3),
               LearnPageFunction('LEXICALSENTENCESTRIOS', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Trios
@@ -221,7 +219,7 @@ export function TrainingModeSelector(): ReactElement {
             onClick={() => [
               setModuleNumber(4),
               LearnPageFunction('LEXICALSENTENCES', trainingLevel),
-              document.getElementById('txt_Name')?.focus(),
+              document.getElementById('chordsInput')?.focus(),
             ]}
           >
             Test

src/store/trainingStore/actions.ts

@@ -1,46 +1,37 @@
-import { action, actionOn, Actions, computed, thunkOn } from 'easy-peasy';
+import { action, actionOn, Actions, thunkOn } from 'easy-peasy';
+import type { TrainingLevels } from 'src/models/trainingLevels';
+import type { ChordStatisticsFromDevice } from 'src/models/trainingStatisticsFromDevice';
 import type { ChordLibraryRecord } from '../../data/chordLibrary';
+import { chordLibrary } from '../../data/chordLibrary';
+import {
+  avgCalculatorForTheSpeedOfLastTen,
+  getCumulativeAverageChordTypeTime,
+  wpmMethodCalculator,
+} from '../../helpers/aggregation';
 import { generateChords } from '../../helpers/generateTrainingData';
 import type { TrainingScenario } from '../../models/trainingScenario';
 import {
-  defaultTrainingSettings,
   defaultAlphabeticTestTraining,
-  defaultTrigramsTestTraining,
+  defaultTrainingSettings,
   defaultTrainingSettingsState,
+  defaultTrigramsTestTraining,
 } from '../../models/trainingSettingsStateModel';
-import {
-  oldAsciiKeyReplacementDictionary,
-  _keyMapDefaults,
-} from '../../pages/manager/controls/maps';
 import {
   ChordStatistics,
   createEmptyChordStatistics,
-  createEmptyLexicalStMStatistics,
   createEmptyChordStatisticsFromDevice,
+  createEmptyLexicalStMStatistics,
   MAXIMUM_ALLOWED_SPEED_FOR_CHORD_STATS,
-  TrainingStatistics,
   StoredStMStatistics,
+  TrainingStatistics,
 } from '../../models/trainingStatistics';
 import type {
   TrainingStoreActionsModel,
   TrainingStoreModel,
   TrainingStoreStateModel,
 } from '../../models/trainingStore';
 import { getChordLibraryForTrainingScenario } from '../../pages/test/components/EditChordModal';
-import type { WordTrainingValues } from 'src/models/wordTrainingValues';
-import type { TrainingLevels } from 'src/models/trainingLevels';
-import store from '../store';
-import type { ChordStatisticsFromDevice } from 'src/models/trainingStatisticsFromDevice';
-import {
-  oneTimeCreateStoredChordStats,
-  oneTimeCreateLexicalStoredSentences,
-} from '../../pages/test/components/TrainingModeSelector';
-import { chordLibrary } from '../../data/chordLibrary';
-import {
-  avgCalculatorForTheSpeedOfLastTen,
-  getCumulativeAverageChordTypeTime,
-  wpmMethodCalculator,
-} from '../../helpers/aggregation';
+import { oneTimeCreateStoredChordStats } from '../../pages/test/components/TrainingModeSelector';
 
 const CHORD_LINE_LENGTH = 30;
 const ALPHABET_LINE_LENGTH = 24;
@@ -560,7 +551,7 @@ function checkIfShouldProceedToNextTargetChord(
   storeState: TrainingStoreStateModel,
   actions: Actions<TrainingStoreModel>,
 ) {
-  const wordValue = document.getElementById('txt_Name')?.value;
+  const wordValue = document.getElementById('chordsInput')?.value;
   const wordToCompare = isInAlphabetMode
     ? storeState.targetWord
     : storeState.targetWord + ' ';
@@ -1204,7 +1195,7 @@ const generateStartingTrainingData = (state: TrainingStoreStateModel) => {
     generateOneLineOfChords(),
     generateOneLineOfChords(),
   ];
-  document.getElementById('txt_Name')?.focus();
+  document.getElementById('chordsInput')?.focus();
 };
 
 export default trainingStoreActions;