changed bind from 'click' to 'autocompleteselect'

Closes #3455555

js/tree.js

@@ -20,30 +20,38 @@
         $('.taxonomy-manager-autocomplete-input').show();
         return true;
       });
-      // Handle click on autocomplete suggestion
-      $(once('input', '.ui-autocomplete', context)).on('click', function (e) {
-        e.stopPropagation();
-        var tidMatch = $('input[name="search_terms"]').val().match(/\([0-9]*\)/g)
-        if (tidMatch.length) {
-          var tid = parseInt(tidMatch[0].replace(/^[^0-9]+/, ''), 10);
-          // Request tree keys to activate via ajax.
-          $.ajax({
-            url: Drupal.url('taxonomy_manager/subtree/child-parents'),
-            dataType: 'json',
-            data: {
-              'tid': tid
-            },
-            success: function (termData) {
-              var $tree = $("#edit-taxonomy-manager-tree").fancytree("getTree");
-              var path = termData.path;
-              $tree.loadKeyPath(path).progress(function (keyData) {
-                if (keyData.status === 'ok') {
-                  $tree.activateKey(keyData.node.key);
-                }
-              });
-            }
-          });
-        }
+
+      once('input','input[name="search_terms"]', context).forEach(value => {
+        const uiAutocomplete = $(value);
+
+        //Bind the autocomplete widget to the input field
+        // @see https://api.jqueryui.com/autocomplete/#event-select
+        uiAutocomplete.bind('autocompleteselect', (event, ui) => {
+          event.stopPropagation();
+          const tidMatch = ui.item.value.match(/\([0-9]*\)/g)
+          if (tidMatch.length) {
+            const tid = parseInt(tidMatch[0].replace(/^[^0-9]+/, ''), 10);
+            $.ajax({
+              url: Drupal.url('taxonomy_manager/subtree/child-parents'),
+              dataType: 'json',
+              data: {
+                'tid': tid
+              },
+              success: termData => {
+                const $tree = $("#edit-taxonomy-manager-tree").fancytree("getTree");
+                const path = termData.path;
+                $tree.loadKeyPath(path).progress(keyData => {
+                  if (keyData.status === 'ok') {
+                    $tree.activateKey(keyData.node.key);
+                  }
+                });
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.error(`Request failed: ${textStatus}, ${errorThrown}`);
+              }
+            });
+          }
+        });
       });
     }
   };