[Management] Address UI searching bug with index pattern creation (#14646)

* Move this logic to a separate directive. Also fix a couple bugs with it around how it interacts with angular.

* Updated variable name

* Handle some edge cases and simplify code

* Fixing typo and further simplyfing code

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/append_wildcard.js

@@ -0,0 +1,48 @@
+import { uiModules } from 'ui/modules';
+
+const module = uiModules.get('apps/management');
+
+/**
+ * This directive automatically appends a wildcard to the input field
+ * after the user starts typing. It lets the user delete the wildcard
+ * if necessary. If the value of the input field is set back to an empty
+ * string, the wildcard is immediately re-appended after the user starts
+ * typing. This is intended to be a UX improvement for the index pattern
+ * creation page. See https://github.com/elastic/kibana/pull/13454
+ */
+module.directive('appendWildcard', function () {
+  return {
+    require: 'ngModel',
+    link: function ($scope, $elem, $attrs, $ctrl) {
+      $elem.on('keydown', (e) => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+        // is not recommended so we need to rely on `key` but browser support
+        // is still spotty (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
+        // so just bail if it's not supported
+        if (!e.key) {
+          return;
+        }
+
+        if (!/[a-z0-9]/i.test(e.key)) {
+          return;
+        }
+
+        // If the user is holding down ctrl/cmd, they are performing some shortcut
+        // and do not interpret literally
+        if (e.metaKey) {
+          return;
+        }
+
+        let indexPatternName = $elem.val() + e.key;
+        if (indexPatternName.length === 1 && indexPatternName !== '*') {
+          indexPatternName += '*';
+          e.preventDefault();
+          $elem.val(indexPatternName);
+          $elem[0].setSelectionRange(1, 1);
+        }
+
+        $ctrl.$setViewValue(indexPatternName);
+      });
+    }
+  };
+});

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html

@@ -34,6 +34,7 @@
                 placeholder="index-name-*"
                 validate-index-pattern
                 validate-index-pattern-allow-wildcard
+                append-wildcard
                 name="name"
                 required
                 type="text"

src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.js

@@ -1,6 +1,7 @@
 import { uiModules } from 'ui/modules';
 import './step_index_pattern.less';
 import template from './step_index_pattern.html';
+import './append_wildcard';
 
 const module = uiModules.get('apps/management');
 
@@ -23,24 +24,10 @@ module.directive('stepIndexPattern', function () {
       matchingIndices: '=',
       goToNextStep: '&',
     },
-    link: function (scope, element) {
-      scope.stepIndexPattern.appendedWildcard = false;
-
+    link: function (scope) {
       scope.$watch('stepIndexPattern.allIndices', scope.stepIndexPattern.updateList);
       scope.$watch('stepIndexPattern.matchingIndices', scope.stepIndexPattern.updateList);
       scope.$watch('stepIndexPattern.indexPatternName', () => {
-        if (scope.stepIndexPattern.indexPatternName && scope.stepIndexPattern.indexPatternName.length === 1) {
-          if (scope.stepIndexPattern.indexPatternName === '*') {
-            if (scope.stepIndexPattern.appendedWildcard) {
-              scope.stepIndexPattern.indexPatternName = '';
-              scope.stepIndexPattern.appendedWildcard = false;
-            }
-          } else {
-            scope.stepIndexPattern.indexPatternName += '*';
-            scope.stepIndexPattern.appendedWildcard = true;
-            setTimeout(() => element.find('#indexPatternNameField')[0].setSelectionRange(1, 1));
-          }
-        }
         // Only send the request if there's valid input.
         if (scope.stepIndexPattern.indexPatternNameForm && scope.stepIndexPattern.indexPatternNameForm.$valid) {
           scope.stepIndexPattern.fetchMatchingIndices();