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) {