From aba3626b7d20cf50afff80352622f78a5481d4ee Mon Sep 17 00:00:00 2001
From: Alexander Polynomdivision <digitalmail555@googlemail.com>
Date: Thu, 11 Oct 2018 19:46:28 +0200
Subject: [PATCH] feat: Add autofocus to the search field

---
 frontend/src/pages/vocab.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/vocab.tsx b/frontend/src/pages/vocab.tsx
index 367694c..3a09664 100644
--- a/frontend/src/pages/vocab.tsx
+++ b/frontend/src/pages/vocab.tsx
@@ -9,7 +9,6 @@ import TextField from "@material-ui/core/TextField";
 import Dialog from "@material-ui/core/Dialog";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
-/* import DialogContentText from "@material-ui/core/DialogContentText"; */
 import DialogActions from "@material-ui/core/DialogActions";
 
 import SearchIcon from "@material-ui/icons/Search";
@@ -35,8 +34,16 @@ interface IProps {
 export default class VocabPage extends React.Component<IProps> {
     // Internal counter for dynmic children
     private uid = 0;
-    genUID = () => {
-        return `VOCABPAGE-${this.uid++}`;
+    // Mapping Vocab ID -> React Key
+    private uids: { [id: number]: string } = {};
+
+    // @vid: The vocabulary ID of the child
+    genUID = (vid: number) => {
+        if (!(vid in this.uids)) {
+            this.uids[vid] = `VOCABPAGE-${this.uid++}`;
+        }
+
+        return this.uids[vid];
     }
 
     componentDidMount() {
@@ -79,7 +86,7 @@ export default class VocabPage extends React.Component<IProps> {
             [VocabType.ADVERB]: "Adverb",
         };
 
-        return <Paper key={this.genUID()} style={{ marginBottom: 12, padding: 12 }}>
+        return <Paper key={this.genUID(voc.id)} style={{ marginBottom: 12, padding: 12 }}>
             <Typography gutterBottom variant="headline" component="h2">
                 {`${voc.latin.grundform} (${vocabTypeToStr[voc.type]})`}
             </Typography>
@@ -137,7 +144,10 @@ export default class VocabPage extends React.Component<IProps> {
                         helperText="Suche nach Vokabeln"
                         onKeyPress={onEnter}
                         value={this.props.searchTerm}
-                        onChange={(event) => this.props.setSearchTerm(event.target.value)} />
+                        onChange={(event) => this.props.setSearchTerm(event.target.value)}
+                        inputProps={{
+                            autoFocus: "autofocus",
+                        }} />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={this.applySearchFilter} color="primary">