UX keyword chooser - enter key (geonetwork#4735)

* UX keyword chooser - enter key * more UX improvements Co-authored-by: david blasby <[email protected]>
GeoCat · Jun 15, 2020 · 299850f · 299850f
1 parent 8dae1a1
commit 299850f
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js
@@ -419,8 +419,42 @@
 
                        // Clear typeahead
                        this.tagsinput('input').typeahead('val', '');
+                       field.blur();
+                       field.triggerHandler('input'); // force angular to see changes
                      }, $(id))
                      );
+                     // UX improvement
+                     // When the user presses "enter", allow the item to be selected
+                      field.bind("keydown keypress", function(event){
+                          if (event.isDefaultPrevented()) {
+                              event.stopPropagation(); // need to prevent this from bubbling - or something might action it
+                              field.focus(); //allow to type again
+                              return false;   //this event has already been handled by tt-typeahead, dont do it twice!
+                          }
+                          if (event.keyCode ==13) { // pressed "enter"
+                              event.stopPropagation(); // we are handling the event...
+                              event.preventDefault();
+                              if (element.find(".tt-selectable").length <1)
+                                return; // should be an element (keyword choice) visible
+                              var val = element.find(".tt-selectable").first().text(); //first one
+                              if ( (!val) || (val == ''))
+                                return; // no value, nothing to do
+
+                              //get full keyword info from server
+                              gnThesaurusService.getKeywords(val,
+                                    scope.thesaurusKey, gnLangs.current, 1, 'MATCH')
+                                    .then(function(listOfKeywords) {
+                                        if (listOfKeywords.length == 1) { // should be one match
+                                            field.typeahead().trigger("typeahead:selected", listOfKeywords[0],listOfKeywords[0]);
+                                            field.typeahead('close');
+                                            field.focus(); //allow to type again
+                                            field.triggerHandler('input'); // force angular to see changes
+                                        }
+                                    }
+                              );
+
+                          }
+                      });
 
                      $(id).on('itemRemoved', function() {
                        angular.copy($(this)