Merge branch '335902-fix-labels-dropdown-causing-form-submission' into 'master'

Fix labels dropdown causing form submission

See merge request gitlab-org/gitlab!66435

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue

@@ -132,6 +132,9 @@ export default {
       } else if (e.keyCode === ENTER_KEY_CODE && this.currentHighlightItem > -1) {
         this.updateSelectedLabels([this.visibleLabels[this.currentHighlightItem]]);
         this.searchKey = '';
+
+        // Prevent parent form submission upon hitting enter.
+        e.preventDefault();
       } else if (e.keyCode === ESC_KEY_CODE) {
         this.toggleDropdownContents();
       }

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js

@@ -116,6 +116,8 @@ describe('DropdownContentsLabelsView', () => {
   });
 
   describe('methods', () => {
+    const fakePreventDefault = jest.fn();
+
     describe('isLabelSelected', () => {
       it('returns true when provided `label` param is one of the selected labels', () => {
         expect(wrapper.vm.isLabelSelected(mockRegularLabel)).toBe(true);
@@ -191,9 +193,11 @@ describe('DropdownContentsLabelsView', () => {
 
         wrapper.vm.handleKeyDown({
           keyCode: ENTER_KEY_CODE,
+          preventDefault: fakePreventDefault,
         });
 
         expect(wrapper.vm.searchKey).toBe('');
+        expect(fakePreventDefault).toHaveBeenCalled();
       });
 
       it('calls action `updateSelectedLabels` with currently highlighted label when Enter key is pressed', () => {
@@ -204,6 +208,7 @@ describe('DropdownContentsLabelsView', () => {
 
         wrapper.vm.handleKeyDown({
           keyCode: ENTER_KEY_CODE,
+          preventDefault: fakePreventDefault,
         });
 
         expect(wrapper.vm.updateSelectedLabels).toHaveBeenCalledWith([