Merge branch '238219-fix-node-form-input-event' into 'master'

Geo Node Form - Use @input event

Closes #238219

See merge request gitlab-org/gitlab!39727

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue

@@ -18,11 +18,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      namespaceSearch: '',
-    };
-  },
   computed: {
     ...mapState(['synchronizationNamespaces']),
     dropdownTitle() {
@@ -35,11 +30,6 @@ export default {
       return this.synchronizationNamespaces.length === 0;
     },
   },
-  watch: {
-    namespaceSearch() {
-      this.fetchSyncNamespaces(this.namespaceSearch);
-    },
-  },
   methods: {
     ...mapActions(['fetchSyncNamespaces']),
     toggleNamespace(namespace) {
@@ -58,8 +48,8 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces(namespaceSearch)">
-    <gl-search-box-by-type v-model="namespaceSearch" class="m-2" :debounce="500" />
+  <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
+    <gl-search-box-by-type class="m-2" :debounce="500" @input="fetchSyncNamespaces" />
     <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
       <gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
         <gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />

ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js

@@ -64,6 +64,18 @@ describe('GeoNodeFormNamespaces', () => {
       it('has debounce prop', () => {
         expect(findGlDropdownSearch().attributes('debounce')).toBe('500');
       });
+
+      describe('onSearch', () => {
+        const namespaceSearch = 'test search';
+
+        beforeEach(() => {
+          findGlDropdownSearch().vm.$emit('input', namespaceSearch);
+        });
+
+        it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
+          expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(namespaceSearch);
+        });
+      });
     });
 
     describe('findDropdownItems', () => {
@@ -85,21 +97,6 @@ describe('GeoNodeFormNamespaces', () => {
     });
   });
 
-  describe('watchers', () => {
-    describe('namespaceSearch', () => {
-      const namespaceSearch = 'test search';
-
-      beforeEach(() => {
-        createComponent();
-        findGlDropdownSearch().vm.$emit('input', namespaceSearch);
-      });
-
-      it('calls fetchSyncNamespaces when input event is fired from GlSearchBoxByType', () => {
-        expect(actionSpies.fetchSyncNamespaces).toHaveBeenCalledWith(namespaceSearch);
-      });
-    });
-  });
-
   describe('methods', () => {
     describe('toggleNamespace', () => {
       beforeEach(() => {