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 @@
{{! template-lint-disable no-down-event-binding }}
-
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) {