From 487439c10100fc3426709ecc07b6c0f766819f76 Mon Sep 17 00:00:00 2001 From: Tangent Chang Date: Thu, 2 Nov 2023 08:38:37 +0800 Subject: [PATCH 1/2] fix: rename input id from txt_Name to chordsInput to prevent contacts autofill bug in safari --- src/pages/test/components/ChordTextInput.tsx | 9 ++-- .../components/ChordingEnabledAlgorithm.tsx | 9 ++-- src/pages/test/components/EditChordModal.tsx | 20 ++++----- src/pages/test/components/TextPrompt.tsx | 16 ++++---- .../test/components/TrainingModeSelector.tsx | 28 ++++++------- src/store/trainingStore/actions.ts | 41 ++++++++----------- 6 files changed, 54 insertions(+), 69 deletions(-) diff --git a/src/pages/test/components/ChordTextInput.tsx b/src/pages/test/components/ChordTextInput.tsx index 8c3a69cd..4dffd2ea 100644 --- a/src/pages/test/components/ChordTextInput.tsx +++ b/src/pages/test/components/ChordTextInput.tsx @@ -1,8 +1,7 @@ -import React, { ReactElement, useRef, useState } from 'react'; +import { 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,7 +96,7 @@ 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), @@ -105,8 +104,8 @@ function ChordTextInput(): ReactElement { ]} 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) => { diff --git a/src/pages/test/components/ChordingEnabledAlgorithm.tsx b/src/pages/test/components/ChordingEnabledAlgorithm.tsx index d2ec2ee0..622cbaf6 100644 --- a/src/pages/test/components/ChordingEnabledAlgorithm.tsx +++ b/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 || diff --git a/src/pages/test/components/EditChordModal.tsx b/src/pages/test/components/EditChordModal.tsx index 06f4d058..87da7b9f 100644 --- a/src/pages/test/components/EditChordModal.tsx +++ b/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 => { diff --git a/src/pages/test/components/TextPrompt.tsx b/src/pages/test/components/TextPrompt.tsx index 28603bef..09671077 100644 --- a/src/pages/test/components/TextPrompt.tsx +++ b/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() {
[ - 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(); diff --git a/src/pages/test/components/TrainingModeSelector.tsx b/src/pages/test/components/TrainingModeSelector.tsx index 1f617ce9..3c6b1404 100644 --- a/src/pages/test/components/TrainingModeSelector.tsx +++ b/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 diff --git a/src/store/trainingStore/actions.ts b/src/store/trainingStore/actions.ts index f0bac522..6c69a30e 100644 --- a/src/store/trainingStore/actions.ts +++ b/src/store/trainingStore/actions.ts @@ -1,25 +1,29 @@ -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, @@ -27,20 +31,7 @@ import type { 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, ) { - 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; From f3c84cd3214554d03cd2f90e52c98710d969cc92 Mon Sep 17 00:00:00 2001 From: COChara <92278604+COChara@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:01:49 -0600 Subject: [PATCH 2/2] Update ChordTextInput.tsx --- src/pages/test/components/ChordTextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/test/components/ChordTextInput.tsx b/src/pages/test/components/ChordTextInput.tsx index 4dffd2ea..0f44f25e 100644 --- a/src/pages/test/components/ChordTextInput.tsx +++ b/src/pages/test/components/ChordTextInput.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useRef, useState } from 'react'; +import React, { ReactElement, useRef, useState } from 'react'; import { useHUD } from '../../../hooks/useHUD'; import usePopover from '../../../hooks/usePopover'; import { useStoreActions, useStoreState } from '../../../store/store';