From 72b46b87aa97109b92d13a02ea8d568f5062b831 Mon Sep 17 00:00:00 2001
From: hc-github-team-secure-vault-core
 <82990506+hc-github-team-secure-vault-core@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:40:18 -0400
Subject: [PATCH] backport of UI: focus navigate-input after page filter
 (#21862)

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
---
 changelog/21767.txt                           |  3 ++
 .../core/addon/components/navigate-input.hbs  |  8 +++--
 .../core/addon/components/navigate-input.js   | 34 +++++++++++++++----
 3 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 changelog/21767.txt

diff --git a/changelog/21767.txt b/changelog/21767.txt
new file mode 100644
index 000000000..2092442e4
--- /dev/null
+++ b/changelog/21767.txt
@@ -0,0 +1,3 @@
+```release-note:bug 
+ui: Fixed secrets, leases, and policies filter dropping focus after a single character
+```
diff --git a/ui/lib/core/addon/components/navigate-input.hbs b/ui/lib/core/addon/components/navigate-input.hbs
index a16588a0a..a25bc603d 100644
--- a/ui/lib/core/addon/components/navigate-input.hbs
+++ b/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>
diff --git a/ui/lib/core/addon/components/navigate-input.js b/ui/lib/core/addon/components/navigate-input.js
index 2a54a2547..955b34ed6 100644
--- a/ui/lib/core/addon/components/navigate-input.js
+++ b/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
-  handleInput(filter) {
-    if (this.args.filterDidChange) {
-      this.args.filterDidChange(filter.target.value);
+  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
+      );
     }
-    debounce(this, this.filterUpdated, filter.target.value, 200);
+  }
+
+  @action
+  handleInput(evt) {
+    if (this.args.filterDidChange) {
+      this.args.filterDidChange(evt.target.value);
+    }
+    debounce(this, this.filterUpdated, evt.target.value, 400);
   }
   @action
   setFilterFocused(isFocused) {