UI: focus navigate-input after automatic page filter (hashicorp#21767)

changelog/21767.txt

@@ -0,0 +1,3 @@
+```release-note:bug 
+ui: Fixed secrets, leases, and policies filter dropping focus after a single character
+```

ui/lib/core/addon/components/navigate-input.hbs

@@ -2,17 +2,19 @@
   <div class="field" data-test-nav-input>
     <p class="control has-icons-left">
       {{! template-lint-disable no-down-event-binding }}
-      <input
+      <Input
+        id={{this.inputId}}
         class="filter input"
-        value={{@filter}}
         placeholder={{or @placeholder "Filter items"}}
-        type="text"
+        @value={{@filter}}
+        @type="text"
         data-test-component="navigate-input"
         {{on "input" this.handleInput}}
         {{on "keyup" this.handleKeyUp}}
         {{on "keydown" this.handleKeyPress}}
         {{on "focus" (fn this.setFilterFocused true)}}
         {{on "blur" (fn this.setFilterFocused false)}}
+        {{did-insert this.maybeFocusInput}}
       />
       <Icon @name="search" class="search-icon has-text-grey-light" />
     </p>

ui/lib/core/addon/components/navigate-input.js

@@ -3,15 +3,17 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { debounce } from '@ember/runloop';
+import { debounce, later } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import Component from '@glimmer/component';
 
 // TODO MOVE THESE TO THE ADDON
 import utils from 'vault/lib/key-utils';
 import keys from 'vault/lib/keycodes';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
+import Ember from 'ember';
 
 /**
  * @module NavigateInput
@@ -61,6 +63,7 @@ const routeFor = function (type, mode, urls) {
 
 export default class NavigateInput extends Component {
   @service router;
+  inputId = `nav-input-${guidFor(this)}`;
 
   get mode() {
     return this.args.mode || 'secrets';
@@ -129,7 +132,7 @@ export default class NavigateInput extends Component {
   }
 
   onTab(event) {
-    const firstPartialMatch = this.args.firstPartialMatch.id;
+    const firstPartialMatch = this.args.firstPartialMatch?.id;
     if (!firstPartialMatch) {
       return;
     }
@@ -190,14 +193,31 @@ export default class NavigateInput extends Component {
         page: 1,
       },
     });
+    // component is not re-rendered on policy list so trigger autofocus here
+    this.maybeFocusInput();
+  }
+
+  @action
+  maybeFocusInput() {
+    // if component is loaded and filter is already applied,
+    // we assume the user just typed in a filter and the page reloaded
+    if (this.args.filter && !Ember.testing) {
+      later(
+        this,
+        function () {
+          document.getElementById(this.inputId).focus();
+        },
+        400
+      );
+    }
   }
 
   @action
-  handleInput(filter) {
+  handleInput(evt) {
     if (this.args.filterDidChange) {
-      this.args.filterDidChange(filter.target.value);
+      this.args.filterDidChange(evt.target.value);
     }
-    debounce(this, this.filterUpdated, filter.target.value, 200);
+    debounce(this, this.filterUpdated, evt.target.value, 400);
   }
   @action
   setFilterFocused(isFocused) {