Fixes two ui issues (#206)

* Fixes two ui issues

References #205
- Fixes issue when in Table mode for the artist index when you click on a letter and error was thrown
- The VirtualTable reference was not set prior to trying to access functions on the object

Also fixes another ui issue I saw, when you were in the search box, the up and down arrows would not work in the Autocomplete componenet, this fixes that.

Gitignore changes to ignore my Idea projects

Adds .editorconfig for editors that respect that to maintain spacing and other config

* Changers per @QStick and the code review.

- Moved Ref out to funtion rather than inline as that can cause a performance hit
- Changed line in gitignore to ignore any .idea folder
- Cleaned up the editorconfig file
- Used proper background color in the CSS for the search suggestions
-

.gitignore

@@ -133,4 +133,6 @@ output/*
 _start
 _temp_*/**/*
 
-src/.idea/
+## Merge any idea folder
+*/**/.idea
+*.iml

frontend/.editorconfig

@@ -0,0 +1,6 @@
+[*]
+insert_final_newline = true
+
+[*.{js,css}]
+indent_style = space
+indent_size = 2

frontend/src/Artist/Index/Table/ArtistIndexTable.js

@@ -9,10 +9,22 @@ import ArtistIndexRow from './ArtistIndexRow';
 import styles from './ArtistIndexTable.css';
 
 class ArtistIndexTable extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this._table = null;
+  }
 
   //
   // Control
 
+  /**
+   * Sets the reference to the virtual table
+   * @param ref
+   */
+  setTableRef = (ref) => {
+    this._table = ref;
+  };
+
   scrollToFirstCharacter(character) {
     const items = this.props.items;
 
@@ -74,6 +86,7 @@ class ArtistIndexTable extends Component {
 
     return (
       <VirtualTable
+        ref={this.setTableRef}
         className={styles.tableContainer}
         items={items}
         scrollTop={scrollTop}

frontend/src/Components/Page/Header/ArtistSearchInput.css

@@ -72,7 +72,7 @@
 }
 
 .highlighted {
-  background-color: $themeLightColor;
+  background-color: $primaryHoverBackgroundColor;
 }
 
 .sectionTitle {

frontend/src/Components/Page/Header/ArtistSearchInput.js

@@ -56,7 +56,7 @@ class ArtistSearchInput extends Component {
   }
 
   getSuggestionValue({ title }) {
-    return title;
+    return title || '';
   }
 
   renderSuggestion(item, { query }) {
@@ -92,11 +92,15 @@ class ArtistSearchInput extends Component {
   // Listeners
 
   onChange = (event, { newValue }) => {
+    if (!newValue) {
+      return;
+    }
+
     this.setState({ value: newValue });
   }
 
   onKeyDown = (event) => {
-    if (event.key !== 'Tab' && event.key !== 'Enter') {
+    if (event.key !== 'Tab' && event.key !== 'Enter' || event.key !== 'ArrowDown' || event.key !== 'ArrowUp') {
       return;
     }
 
@@ -110,7 +114,7 @@ class ArtistSearchInput extends Component {
       highlightedSuggestionIndex
     } = this._autosuggest.state;
 
-    if (!suggestions.length || highlightedSectionIndex) {
+    if (!suggestions.length || highlightedSectionIndex && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
       this.props.onGoToAddNewArtist(value);
       this._autosuggest.input.blur();
 
@@ -120,7 +124,7 @@ class ArtistSearchInput extends Component {
     // If an suggestion is not selected go to the first artist,
     // otherwise go to the selected artist.
 
-    if (highlightedSuggestionIndex == null) {
+    if (highlightedSuggestionIndex == null && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
       this.goToArtist(suggestions[0]);
     } else {
       this.goToArtist(suggestions[highlightedSuggestionIndex]);