diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 0540051c983..26ba4c762c1 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -7,12 +7,6 @@ import gkeDropdownMixin from './gke_dropdown_mixin';
 export default {
   name: 'GkeMachineTypeDropdown',
   mixins: [gkeDropdownMixin],
-  data() {
-    return {
-      searchPlaceholderText: s__('ClusterIntegration|Search machine types'),
-      noSearchResultsText: s__('ClusterIntegration|No machine types matched your search'),
-    };
-  },
   computed: {
     ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
     ...mapState({ items: 'machineTypes' }),
@@ -87,18 +81,23 @@ export default {
     <div class="dropdown-menu dropdown-select">
       <dropdown-search-input
         v-model="searchQuery"
-        :placeholder-text="searchPlaceholderText"
+        :placeholder-text="s__('ClusterIntegration|Search machine types')"
       />
       <div class="dropdown-content">
         <ul>
           <li v-show="!results.length">
-            <span class="menu-item">{{ noSearchResultsText }}</span>
+            <span class="menu-item">
+              {{ s__('ClusterIntegration|No machine types matched your search') }}
+            </span>
           </li>
           <li
             v-for="result in results"
             :key="result.id"
           >
-            <button @click.prevent="setItem(result.name)">
+            <button
+              type="button"
+              @click.prevent="setItem(result.name)"
+            >
               {{ result.name }}
             </button>
           </li>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index bcc41aefc72..33589d62b89 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -14,12 +14,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      searchPlaceholderText: s__('ClusterIntegration|Search projects'),
-      noSearchResultsText: s__('ClusterIntegration|No projects matched your search'),
-    };
-  },
   computed: {
     ...mapState(['selectedProject']),
     ...mapState({ items: 'projects' }),
@@ -116,18 +110,23 @@ export default {
       <div class="dropdown-menu dropdown-select">
         <dropdown-search-input
           v-model="searchQuery"
-          :placeholder-text="searchPlaceholderText"
+          :placeholder-text="s__('ClusterIntegration|Search projects')"
         />
         <div class="dropdown-content">
           <ul>
             <li v-show="!results.length">
-              <span class="menu-item">{{ noSearchResultsText }}</span>
+              <span class="menu-item">
+                {{ s__('ClusterIntegration|No projects matched your search') }}
+              </span>
             </li>
             <li
               v-for="result in results"
               :key="result.project_number"
             >
-              <button @click.prevent="setItem(result)">
+              <button
+                type="button"
+                @click.prevent="setItem(result)"
+              >
                 {{ result.name }}
               </button>
             </li>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index 9a99d986d05..d0e6bfc0137 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -7,12 +7,6 @@ import gkeDropdownMixin from './gke_dropdown_mixin';
 export default {
   name: 'GkeZoneDropdown',
   mixins: [gkeDropdownMixin],
-  data() {
-    return {
-      searchPlaceholderText: s__('ClusterIntegration|Search zones'),
-      noSearchResultsText: s__('ClusterIntegration|No zones matched your search'),
-    };
-  },
   computed: {
     ...mapState(['selectedProject', 'selectedZone']),
     ...mapState({ items: 'zones' }),
@@ -68,18 +62,23 @@ export default {
     <div class="dropdown-menu dropdown-select">
       <dropdown-search-input
         v-model="searchQuery"
-        :placeholder-text="searchPlaceholderText"
+        :placeholder-text="s__('ClusterIntegration|Search zones')"
       />
       <div class="dropdown-content">
         <ul>
           <li v-show="!results.length">
-            <span class="menu-item">{{ noSearchResultsText }}</span>
+            <span class="menu-item">
+              {{ s__('ClusterIntegration|No zones matched your search') }}
+            </span>
           </li>
           <li
             v-for="result in results"
             :key="result.id"
           >
-            <button @click.prevent="setItem(result.name)">
+            <button
+              type="button"
+              @click.prevent="setItem(result.name)"
+            >
               {{ result.name }}
             </button>
           </li>