From 54ca73f4746eb054749de2e17f2e837604428526 Mon Sep 17 00:00:00 2001
From: David Bates <me@dave-bates.net>
Date: Sun, 11 Feb 2018 09:57:00 -0600
Subject: [PATCH] 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                                          |  4 +++-
 frontend/.editorconfig                              |  6 ++++++
 frontend/src/Artist/Index/Table/ArtistIndexTable.js | 13 +++++++++++++
 .../Components/Page/Header/ArtistSearchInput.css    |  2 +-
 .../src/Components/Page/Header/ArtistSearchInput.js | 12 ++++++++----
 5 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 frontend/.editorconfig

diff --git a/.gitignore b/.gitignore
index 47e4c79e6..32f3b4421 100644
--- a/.gitignore
+++ b/.gitignore
@@ -133,4 +133,6 @@ output/*
 _start
 _temp_*/**/*
 
-src/.idea/
+## Merge any idea folder
+*/**/.idea
+*.iml
diff --git a/frontend/.editorconfig b/frontend/.editorconfig
new file mode 100644
index 000000000..c14ef65ef
--- /dev/null
+++ b/frontend/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+insert_final_newline = true
+
+[*.{js,css}]
+indent_style = space
+indent_size = 2
diff --git a/frontend/src/Artist/Index/Table/ArtistIndexTable.js b/frontend/src/Artist/Index/Table/ArtistIndexTable.js
index d49e3a3b9..e4ee39d39 100644
--- a/frontend/src/Artist/Index/Table/ArtistIndexTable.js
+++ b/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}
diff --git a/frontend/src/Components/Page/Header/ArtistSearchInput.css b/frontend/src/Components/Page/Header/ArtistSearchInput.css
index 1cc1c3b2b..71268babc 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.css
+++ b/frontend/src/Components/Page/Header/ArtistSearchInput.css
@@ -72,7 +72,7 @@
 }
 
 .highlighted {
-  background-color: $themeLightColor;
+  background-color: $primaryHoverBackgroundColor;
 }
 
 .sectionTitle {
diff --git a/frontend/src/Components/Page/Header/ArtistSearchInput.js b/frontend/src/Components/Page/Header/ArtistSearchInput.js
index 33d396571..09436d92c 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.js
+++ b/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]);