Show DD contents with v-if, cache labels locally

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

@@ -315,7 +315,7 @@ export default {
       </dropdown-value>
       <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" />
       <dropdown-contents
-        v-show="dropdownButtonVisible && showDropdownContents"
+        v-if="dropdownButtonVisible && showDropdownContents"
         ref="dropdownContents"
         :render-on-top="!contentIsOnViewport"
       />

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js

@@ -21,13 +21,15 @@ export const receiveLabelsFailure = ({ commit }) => {
   });
 };
 export const fetchLabels = ({ state, dispatch }) => {
-  dispatch('requestLabels');
-  return axios
-    .get(state.labelsFetchPath)
-    .then(({ data }) => {
-      dispatch('receiveLabelsSuccess', data);
-    })
-    .catch(() => dispatch('receiveLabelsFailure'));
+  if (!state.labelsFetched) {
+    dispatch('requestLabels');
+    return axios
+      .get(state.labelsFetchPath)
+      .then(({ data }) => {
+        dispatch('receiveLabelsSuccess', data);
+      })
+      .catch(() => dispatch('receiveLabelsFailure'));
+  }
 };
 
 export const requestCreateLabel = ({ commit }) => commit(types.REQUEST_CREATE_LABEL);

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js

@@ -36,6 +36,7 @@ export default {
     // selectedLabels array.
     const selectedLabelIds = state.selectedLabels.map((label) => label.id);
     state.labelsFetchInProgress = false;
+    state.labelsFetched = true;
     state.labels = labels.reduce((allLabels, label) => {
       allLabels.push({
         ...label,

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js

 export default () => ({
   // Initial Data
   labels: [],
+  labelsFetched: false,
   selectedLabels: [],
   labelsListTitle: '',
   labelsCreateTitle: '',

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue

@@ -330,7 +330,7 @@ export default {
       </dropdown-value>
       <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" />
       <dropdown-contents
-        v-show="dropdownButtonVisible && showDropdownContents"
+        v-if="dropdownButtonVisible && showDropdownContents"
         ref="dropdownContents"
         :render-on-top="!contentIsOnViewport"
         :labels-create-title="labelsCreateTitle"