Review players search behavior (arrow keys and click outside)

view-webapp/src/main/sass/main.scss

@@ -444,12 +444,13 @@
       display: inline-block;
       text-align: center;
       cursor: pointer;
+      color: gray;
     }
     .checkbox {
       width: 50px;
       height: 26px;
       border-radius: 18px;
-      background-color: #F7D6A3;
+      background-color: #dadada;
       display: inline-flex;
       align-items: center;
       padding-left: 5px;
@@ -465,11 +466,14 @@
       }
     }
     input:checked + .checkbox {
-      background-color: rgb(218, 114, 80);
+      background-color: rgb(218, 154, 80);
       .circle {
         transform: translateX(20px);
       }
     }
+    input:checked + .checkbox + label {
+      color: black;
+    }
   }
 
   @media print {

view-webapp/src/main/webapp/js/main.js

@@ -238,7 +238,7 @@ onLoad(() => {
       case 'Enter': {
         if (tab === '#registration') {
           if (typeof(searchResultShown) === 'function') {
-            if (searchResultShown()) {
+            if (searchResultShown() && typeof(searchHighlight) !== 'undefined') {
               fillPlayer(searchResult[searchHighlight]);
             } else {
               $('#register')[0].click();

view-webapp/src/main/webapp/js/tour-registration.inc.js

@@ -16,7 +16,7 @@ function initSearch() {
 }
 
 function searchResultShown() {
-  return !(typeof(searchHighlight) === 'undefined' || !searchResult || !searchResult.length || typeof(searchResult[searchHighlight]) === 'undefined')
+  return !(!searchResult || !searchResult.length)
 }
 
 function search(needle) {
@@ -40,7 +40,6 @@ function search(needle) {
     store('searchFormState', searchFormState);
     api.postJson('search', search)
       .then(result => {
-        console.log(result)
         if (Array.isArray(result)) {
           searchResult = result
           let html = resultTemplate.render(result);
@@ -272,6 +271,21 @@ onLoad(() => {
       let index = e.target.closest('.result-line').data('index');
       fillPlayer(searchResult[index]);
     }
+    let tab = document.location.hash;
+    if (store('addingPlayers') && tab === '#registration') {
+      let modal = e.target.closest('#player');
+      if (!modal) {
+        let button = e.target.closest('button');
+        if (!button) {
+          if (searchResultShown()) {
+            $('#needle')[0].value = '';
+            initSearch();
+          } else {
+            close_modal();
+          }
+        }
+      }
+    }
   });
   $('#unregister').on('click', e => {
     let form = $('#player-form')[0];