focus on start button after finishing current set for ease of use

KS-20 · Jul 28, 2021 · e541e76 · e541e76
1 parent c1fa3ab
commit e541e76
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -42,6 +42,11 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = { numToRecall: '12345', isInputMode: true };
+    this.startButton = React.createRef();
+  }
+
+  focusStartButton = () => {
+    this.startButton.current.focus();
   }
 
   componentDidMount() {
@@ -81,7 +86,9 @@ class App extends React.Component {
     return (
       <>
         {mainDisplay}
-        <button type="button" autoFocus onClick={() => this.props.appEngine.startPracticeSet()}>start practice </button>
+        <button type="button" autoFocus onClick={() => this.props.appEngine.startPracticeSet() }
+        ref={this.startButton}>
+          start practice </button>
         <p>length of number:</p>
         <InputForm onChange={this.setNumLengthField} defaultValue={this.state.defaultNumSize} />
         <p>Number of reps:</p>

diff --git a/src/source.js b/src/source.js
@@ -61,6 +61,7 @@ class AppEngine {
             var msg = "succeeded in  "+this.currentSetRecord.getNumOfSuccessfulExercises()+" out of "+
             this.currentSetRecord.getNumOfExercises();
             this.guiController.setNumToRecall(msg);
+            this.guiController.focusStartButton();
         }
 
         return false;
@@ -196,14 +197,17 @@ class ReactGui {
 
     }
 
-
     activateDisplayMode() {
     }
 
     setNumToRecall(numToRecall) {
         var stateToSet = { numToRecall: numToRecall, isInputMode: false };
         this.appComponent.setState(stateToSet)
     }
+
+    focusStartButton() {
+        this.appComponent.focusStartButton();
+    }
 }
 
 var appEngine = new AppEngine(new ReactGui());