Make IPAField display suggestion on last character.

Would be better to figure out how to get it to sense and insert at last
entered character instead of last character in line.

src/Helper.js

@@ -4,13 +4,16 @@ class Helper {
   }
 
   addHelpfulPrototypes () {
-    String.prototype.capitalize = function() {
-        return this.charAt(0).toUpperCase() + this.slice(1);
+    String.prototype.capitalize = function () {
+      return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+    String.prototype.replaceAt = function (index, replacement) {
+      return this.substr(0, index) + replacement + this.substr(index + replacement.length);
     }
   }
 
-  getLastLetter (string) {
-    return string.substr(string.length - 1, 1);
+  characterIsUppercase (character) {
+    return character === character.toUpperCase();
   }
 }
 

src/components/management/IPAField.jsx

@@ -7,8 +7,15 @@ export class IPAField extends Component {
   constructor (props) {
     super(props);
 
+    this.field = null;
+
     this.letterPossibilities = {
-      "a": ['aaa', 'wow']
+      'a': ['\u00E6', '\u0276', '\u0250', '\u0251', '\u0252']
+    , 'e': ['\u025B', '\u0258', '\u0259', '\u025C', '\u0153']
+    , 'i': ['\u026A', '\u0268']
+    , 'o': ['\u0153', '\u00F8', '\u0275', '\u0254']
+    , 'u': ['\u0289', '\u028C', '\u028A', '\u026F']
+    , 'y': ['\u028F', '\u006A', '\u028E', '\u026F']
     }
 
     this.state = {
@@ -18,41 +25,75 @@ export class IPAField extends Component {
     }
   }
 
-  checkDisplay () {
-    const lastLetter = Helper.getLastLetter(this.state.value).toLowerCase();
-    const letterHasSuggestions = this.letterPossibilities.hasOwnProperty(lastLetter);
+  get lastLetter () {
+    return this.state.value.substr(this.state.value.length - 1, 1);
+  }
 
+  get lastLetterIsUppercase () {
+    return Helper.characterIsUppercase(this.lastLetter);
+  }
+
+  get lastLetterHasSuggestions () {
+    return this.letterPossibilities.hasOwnProperty(this.lastLetter.toLowerCase());
+  }
+
+  get lastLetterPossibilities () {
+    return this.lastLetterHasSuggestions ? this.letterPossibilities[this.lastLetter.toLowerCase()] : [];
+  }
+
+  checkDisplay () {
     this.setState({
-      shouldDisplay: this.state.isFocused && letterHasSuggestions
+      shouldDisplay: this.state.isFocused && this.lastLetterHasSuggestions
     });
   }
 
   listSuggestions () {
     if (this.state.shouldDisplay) {
       return (
-        <div className='ipa-suggest' >
-          {this.letterPossibilities[this.props.lastTypedLetter].map(letter => {
-            return (
-              <a className='button is-small is-link'
-                onClick={() => this.props.replaceCharacter(letter)}>
-                {letter}
-              </a>
-            );
-          })}
+        <div className='ipa-suggest'
+          onClick={() => this.setState({ isFocused: true }, this.checkDisplay)}>
+          {this.lastLetterHasSuggestions
+            ? this.lastLetterPossibilities.map(letter => {
+                return (
+                  <a className='button is-small is-link'
+                    onClick={() => this.replaceLastCharacter(letter)}>
+                    {this.lastLetterIsUppercase ? letter.toUpperCase() : letter}
+                  </a>
+                );
+              })
+            : ''}
         </div>
       );
     }
   }
 
+  replaceLastCharacter (character) {
+    let updatedValue = this.state.value;
+    updatedValue = updatedValue.replaceAt(updatedValue.length - 1, (this.lastLetterIsUppercase) ? character.toUpperCase() : character);
+
+    this.setState({ value: updatedValue }, () => {
+      this.field.focus();
+    });
+  }
+
   render () {
     return (
       <div className='field'>
         <label className='label'>Pronunciation</label>
         <p className='control'>
-          <input className='input' type='text' placeholder='[prəˌnʌnsiˈeɪʃən]'
-            value={this.state.wordPronunciation}
-            onFocus={() => this.setState({ isFocused: true })}
-            onBlur={() => this.setState({ isFocused: false })}
+          <input className='input' type='text' placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
+            ref={input => this.field = input}
+            value={this.state.value}
+            onFocus={() => {
+              setTimeout(() => {
+                this.setState({ isFocused: true }, this.checkDisplay)
+              }, 250);
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                this.setState({ isFocused: false }, this.checkDisplay)
+              }, 250);
+            }}
             onInput={event => {
               this.setState({ value: event.target.value }, this.checkDisplay);
             }}

src/sass/_styles.scss

@@ -35,4 +35,5 @@
   border: 1px solid #CCCCFF;
   font-size: 90%;
   width: 200px;
+  z-index: 90;
 }