Commit 5516c668 authored by Kushal Pandya's avatar Kushal Pandya

Autofocus on search input after labels load

Fixes a bug where search input didn't
autofocus after labels get loaded.
parent 66a6e85f
......@@ -92,6 +92,13 @@ export default {
}
}
},
handleComponentAppear() {
// We can avoid putting `catch` block here
// as failure is handled within actions.js already.
return this.fetchLabels().then(() => {
this.$refs.searchInput.focusInput();
});
},
/**
* We want to remove loaded labels to ensure component
* fetches fresh set of labels every time when shown.
......@@ -139,7 +146,7 @@ export default {
</script>
<template>
<gl-intersection-observer @appear="fetchLabels" @disappear="handleComponentDisappear">
<gl-intersection-observer @appear="handleComponentAppear" @disappear="handleComponentDisappear">
<div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
<div
v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
......@@ -158,8 +165,8 @@ export default {
</div>
<div class="dropdown-input" @click.stop="() => {}">
<gl-search-box-by-type
ref="searchInput"
v-model="searchKey"
:autofocus="true"
:disabled="labelsFetchInProgress"
data-qa-selector="dropdown_input_field"
/>
......
......@@ -20,7 +20,7 @@ export const receiveLabelsFailure = ({ commit }) => {
};
export const fetchLabels = ({ state, dispatch }) => {
dispatch('requestLabels');
axios
return axios
.get(state.labelsFetchPath)
.then(({ data }) => {
dispatch('receiveLabelsSuccess', data);
......
---
title: Autofocus on search input within labels dropdown after labels are loaded
merge_request: 46750
author:
type: fixed
......@@ -128,6 +128,16 @@ describe('DropdownContentsLabelsView', () => {
});
});
describe('handleComponentAppear', () => {
it('calls `focusInput` on searchInput field', async () => {
wrapper.vm.$refs.searchInput.focusInput = jest.fn();
await wrapper.vm.handleComponentAppear();
expect(wrapper.vm.$refs.searchInput.focusInput).toHaveBeenCalled();
});
});
describe('handleComponentDisappear', () => {
it('calls action `receiveLabelsSuccess` with empty array', () => {
jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
......@@ -301,7 +311,6 @@ describe('DropdownContentsLabelsView', () => {
const searchInputEl = wrapper.find(GlSearchBoxByType);
expect(searchInputEl.exists()).toBe(true);
expect(searchInputEl.attributes('autofocus')).toBe('true');
});
it('renders label elements for all labels', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment